Jquery 动画单个 div

发布于 2024-12-17 13:52:15 字数 811 浏览 1 评论 0原文

我正在使用 div 类 .item_wrap 的多个实例，当图像类 .item 悬停在其上方时，它会更改高度。

目前，以下脚本在鼠标悬停时对 div 类的所有实例进行动画处理。有没有办法只让当前悬停的 div 动画化，而不让其余的同时动画化？ ^^;

$(document).ready(function(){
    $(".item").hover(
        function(){
            $('.item_wrap').animate({duration:'slow', easing:'easeOutBack', height:265 }, 500);
        },    
        function(){
            $('.item_wrap').stop().animate({duration:'slow', easing:'easeOutBack', height:200 }, 500);
        }
    );
});

html：

<div class="item_wrap">
<a href="images/burgundyholographicgoldsequin.jpg" class="item"  title="image">
<img src="images/burgundyholographicgoldsequin.jpg" width="250" height="192" /></a>
<div class="item_text">Text here</div>
</div>

原文

I am using multiple instances of div class .item_wrap, which changes height when the image class .item is hovered over.

At the moment, the following script animates all instances of the div class on mouse hover. Is there a way to have only the current hovered div animate, without the rest animating at the same time? ^^;

$(document).ready(function(){
    $(".item").hover(
        function(){
            $('.item_wrap').animate({duration:'slow', easing:'easeOutBack', height:265 }, 500);
        },    
        function(){
            $('.item_wrap').stop().animate({duration:'slow', easing:'easeOutBack', height:200 }, 500);
        }
    );
});

the html:

<div class="item_wrap">
<a href="images/burgundyholographicgoldsequin.jpg" class="item"  title="image">
<img src="images/burgundyholographicgoldsequin.jpg" width="250" height="192" /></a>
<div class="item_text">Text here</div>
</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笨死的猪 2024-12-24 13:52:15

假设每个项目与 item_wrap 具有相似的关系（例如 item_wrap 是每个项目的父项），那么您可以使用相对于 this 的选择器。

$(document).ready(function(){
    $(".item").hover(
        function(){
            $(this).parent('.item_wrap').animate({duration:'slow', easing:'easeOutBack', height:265 }, 500);
        },    
        function(){
            $(this).parent('.shopitem_wrap').stop().animate({duration:'slow', easing:'easeOutBack', height:200 }, 500);
        }
    );
});

当然，这取决于您的 HTML。

Assuming each item has a similar relationship with item_wrap (e.g. item_wrap is the parent of each item) then you can use a selector relative to this.

$(document).ready(function(){
    $(".item").hover(
        function(){
            $(this).parent('.item_wrap').animate({duration:'slow', easing:'easeOutBack', height:265 }, 500);
        },    
        function(){
            $(this).parent('.shopitem_wrap').stop().animate({duration:'slow', easing:'easeOutBack', height:200 }, 500);
        }
    );
});

This, ofcourse, depends on your HTML.

回复收藏 0 原文

流云如水 2024-12-24 13:52:15

我们需要知道您页面的 html，但一般来说，如果我们假设

<div class="item">
    <div class="item_wrap"></div>
</div>

那么我会将您的代码更改为

$(document).ready(function(){
$(".item").hover( function(){
$(this).children('.item_wrap').animate({duration:'slow', easing:'easeOutBack', height:265 }, 500);
},    
function() {
$('.shopitem_wrap').stop().animate({duration:'slow', easing:'easeOutBack', height:200 }, 500);
});
});

We would need to know the html of your page, but in general if we assume that

<div class="item">
    <div class="item_wrap"></div>
</div>

then i would change your code to

$(document).ready(function(){
$(".item").hover( function(){
$(this).children('.item_wrap').animate({duration:'slow', easing:'easeOutBack', height:265 }, 500);
},    
function() {
$('.shopitem_wrap').stop().animate({duration:'slow', easing:'easeOutBack', height:200 }, 500);
});
});

回复收藏 0 原文

手心的温暖 2024-12-24 13:52:15

如果我们可以看到您的一些 html，但您想将 this 与您的 .itemwrap div 一起使用，那就更容易了

例如：

$(document).ready(function(){
$(".item").hover( function(){
$('.item_wrap', this).animate({duration:'slow', easing:'easeOutBack', height:265 }, 500);
},    
function() {
$('.shopitem_wrap', this).stop().animate({duration:'slow', easing:'easeOutBack', height:200 }, 500);
});
});

此链接有一个类似的问题：如何获取 $(this) 选择器的子级？

It would be easier if we could see some of your html, but you want to use this with your .itemwrap div

For instance:

$(document).ready(function(){
$(".item").hover( function(){
$('.item_wrap', this).animate({duration:'slow', easing:'easeOutBack', height:265 }, 500);
},    
function() {
$('.shopitem_wrap', this).stop().animate({duration:'slow', easing:'easeOutBack', height:200 }, 500);
});
});

This link has a similar question: How to get the children of the $(this) selector?

回复收藏 0 原文

~没有更多了~