Question

我写了这个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，但不适用于第二个，第三个......

有人可以帮我这个吗？

谢谢和最好的问候

马丁

Answer 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);

});

Answer 2

您需要使用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);
 });
});

一个jquery函数用于几个DIV

2 个答案: