Jquery - Почему мое изображение не анимируется при наведении мыши? - PullRequest
Новая
       9

Jquery - Почему мое изображение не анимируется при наведении мыши?

0 голосов
/ 25 июня 2011

Я пытаюсь оживить мои изображения при наведении курсора мыши, но по какой-то причине он вообще не работает. 

 $(document).ready(function(){
            $(function() {
            $('img.caption').hover(function(){
                $(this).find('img').animate({top:'182px'},{queue:false,duration:500});
            }, function(){
                $(this).find('img').animate({top:'0px'},{queue:false,duration:500});
            });
        });
 });

и прилегающий HTML 

<div class="imagediv"><img class="caption" src="images/gallery/placeholder.jpg" alt="This is test" title="" /></div>

У меня есть еще одно зависание, даже связанное с классом заголовка, может ли это быть конфликтом. При наведении мыши на изображение ничего не происходит: /

Будет ли это мешать другому коду? 

 $(document).ready(function(){
        $(".caption").hover(
                function () {
                  $("#gallerydescription").html( $(this).attr("alt"));

  }, 
  function () {
    $("#gallerydescription").html("");
  }
);
 });

Ответы [ 3 ]

2 голосов
/ 25 июня 2011

  1. $(document).ready(function(){ - это то же самое, что и $(function() {, в основном вы делаете одно и то же дважды, теряете одного из них.

  2. $('img.caption')уже выбирает изображение, в то время как $(this).find('img') начнет искать изображения внутри этого изображения.Ничего не будет найдено.

  3. CSS position должен быть relative или absolute, чтобы ваша анимация работала:

    img { position: relative; }

    $(function(){
    $('img.caption').hover(
        function(){
            $(this).animate({top:'182px'},{queue:false,duration:500});
        },
        function(){
            $(this).animate({top:'0px'},{queue:false,duration:500});
        });
});

РЕДАКТИРОВАТЬ:

Второй .hover() не должен мешать, так как он, кажется, ничего не делает с самим изображением.

См. Эту скрипку для проверки: http://jsfiddle.net/4c6Kx/6/

Лучше всего начать комментировать различные блоки кода, пока не найдете виновника.

0 голосов
/ 25 июня 2011

Пример здесь

Как я уже говорил в комментариях:

  1. Следующие варианты эквивалентны, выберите и выберите:

    $(document).ready(function(){

    $(function() {

  2. вы можете удалить функцию find, так как вы уже начали с img
  3. , вы можете удалить px из задания
  4. вам нужно дать вашему img position (абсолютное / относительное)

Пример: 

$(document).ready(function(){
   $('img.caption').hover(
      function(){ $(this).animate({top:'182'},{queue:false,duration:500}); },
      function(){ $(this).animate({top:'0'},{queue:false,duration:500});   }
   );
});
0 голосов
/ 25 июня 2011

JQuery: 

$(document).ready(function() {
        $('img.caption').hover(function() {
            $(this).animate({
                top: '182px'
            }, {
                queue: false,
                duration: 500
            });
        }, function() {
            $(this).animate({
                top: '0px'
            }, {
                queue: false,
                duration: 500
            });
        });
});

Тогда дайте свое изображение position:relative

...