繁体   English   中英

jQuery图像翻转-幻灯片过渡

[英]Jquery image rollover - slide transition

如何使用Jquery在滑行过渡时在悬停时更改图像? 我在互联网上进行搜索,但找不到有效的代码。 我发现的所有代码都使用fadeIn或fadeOut。 非常感谢你!

这是我找到的代码,但是它使用淡入和淡出:

<script>
$(function() {
$('.change').mouseenter(function(){
  $(this).slideUp('fast', function(){
    $(this).attr('src', $(this).data('on'));
    $(this).fadeIn();
  });
});

$('.change').mouseleave(function(){
  $(this).slideUp('fast', function(){
    $(this).attr('src', $(this).data('off'));
    $(this).fadeIn();
  });
});
});</script>

和html:

<img class="change" src="images/portofoliu/next.gif" data-on="images/portofoliu/prev.gif" data-off="images/portofoliu/next.gif">
<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />

$('#clickme').hover(function() {
  $('#book').slideUp('slow', function() {
    // Animation complete.
  });
});

http://jsfiddle.net/GFdW5/3/

http://api.jquery.com/slideUp/

编辑:最终解决方案: http : //jsfiddle.net/hellomynameisluc/frTFw

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM