一个jquery函数用于几个DIV

时间:2016-02-18 09:15:19

标签: jquery css

我写了这个jquery函数:

$(document).ready(function () {
    $("#change1").hover(function () {
        $(this).find("#changeHeader1").stop().animate( { marginTop: "30px" }, 400 );
        $(this).find("#changeText1").stop().fadeIn(1200);               
        $(this).find("#changeButton1").stop().fadeIn(1200);
    }, function() {
        $(this).find("#changeHeader1").stop().animate( { marginTop: "118px" }, 1000 );                
        $(this).find("#changeText1").stop().fadeOut(700);
        $(this).find("#changeButton1").stop().fadeOut(400);
    });
});

它适用于第一个DIV,但不适用于第二个,第三个......

有人可以帮我这个吗?

谢谢和最好的问候

马丁

2 个答案:

答案 0 :(得分:1)

使用class代替id。您不能对不同的元素使用相同的ID。

然后使用以下内容。

$(".change1").hover(function () {
    $(this).find(".changeHeader1").stop().animate( { marginTop: "30px" }, 400 );
    $(this).find(".changeText1").stop().fadeIn(1200);               
    $(this).find(".changeButton1").stop().fadeIn(1200);
}, function() {
    $(this).find(".changeHeader1").stop().animate( { marginTop: "118px" }, 1000 );                
    $(this).find(".changeText1").stop().fadeOut(700);
    $(this).find(".changeButton1").stop().fadeOut(400);

});

答案 1 :(得分:0)

您需要使用class,并将悬停功能添加到每个按钮。

BasicStroke API

$(document).ready(function () {
    $(".change1, .change2, .change3").hover(function () {
    $(this).find(".changeHeader1").stop().animate( { marginTop: "30px" }, 400 );
    $(this).find(".changeText1").stop().fadeIn(1200);               
    $(this).find(".changeButton1").stop().fadeIn(1200);
  }, function() {
    $(this).find(".changeHeader1").stop().animate( { marginTop: "118px" }, 1000 );                
    $(this).find(".changeText1").stop().fadeOut(700);
    $(this).find(".changeButton1").stop().fadeOut(400);
 });
});

如果你想坚持单一的名字,是的,你可以!!

Hover animation with multiple elements

$(document).ready(function () {
    $(".change").hover(function () {
    $(this).find(".changeHeader1").stop().animate( { marginTop: "30px" }, 400 );
    $(this).find(".changeText1").stop().fadeIn(1200);               
    $(this).find(".changeButton1").stop().fadeIn(1200);
  }, function() {
    $(this).find(".changeHeader1").stop().animate( { marginTop: "118px" }, 1000 );                
    $(this).find(".changeText1").stop().fadeOut(700);
    $(this).find(".changeButton1").stop().fadeOut(400);
 });
});