Одна JQuery функция для нескольких DIVs

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, но не работает со вторым, thrid ...

Может кто-то помочь мне с этим, пожалуйста?

Спасибо и наилучшими пожеланиями

Martin

Answer 1

Использование class вместо 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

Вам нужно использовать класс и добавить функцию наведения на каждую из кнопок.

Hover animation with multiple elements

$(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, using single class name

$(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); 
}); 
});