1 
   <script language="javascript" type="text/javascript" >
   $(
   function () {
   $('li').mouseover(function () {
   var $this = $(this);
  $('#previewImage').animate({ opacity: 0.1 }, 0, function () {
  $(this).attr("src", 'img/' + $this.attr('id') + '.jpg').animate({ opacity: 1 }, 1000);
  });
  // mouseout should come here and hover image should come back to normal while mouseout

  });
  });
  </script>

请帮助我，它应该会出现在这里，并且当鼠标悬停事件发生时，悬停图像应该恢复正常！

4

2 回答 2

1

如果您在此处也有 HTML 代码，那将是最好的。这里有一些要考虑的事情：

  1. 使用 Document Ready 功能包装您的代码
  2. 选择您希望在鼠标悬停和鼠标悬停时设置动画的 html 属性
  3. 而且由于可以将函数传递给事件处理程序，而 mouseover 和 mouseout 是事件处理程序，我认为最好将函数传递给它们。

看看我在下面的片段：

<script type="text/javascript">

    $(function() {

        $('previewImage').mouseover(function() {
            // pass the function here
        }).stop(true, true).mouseout(function() {
            // pass the function here
        });
    });
</script>
于 2013-05-16T22:52:27.190 回答
0

如果我没记错的话，您的问题可能与您正在使用的 this 和 $this 有关。第二个函数中的 this 指针完全不同。

我建议您将其作为参数传递

function (passThisPtr) {
$(this).attr("src", 'img/' + $this.attr('id') + '.jpg').animate({ opacity: 1 }, 1000);
});

或将其绑定到参数...

function () {
$(this).attr("src", 'img/' + $this.attr('id') + '.jpg').animate({ opacity: 1 }, 1000);
}.bind(passThisPtr));

同样，不知道发生了什么很难确切知道，但我认为这是问题所在。

于 2013-05-16T22:36:07.547 回答