问jQuery图像交换悬停在上方
EN

Stack Overflow用户

提问于 2014-06-02 10:46:31

回答 1查看 114关注 0票数 0

我正在尝试实现图像交换效果，似乎无法让它在不跳跃的情况下交换回原始图像(滑出、滑入、滑出、滑入...)实现这一目标的最佳方法是什么？

<ul id="carousel"> 
   <li class="carousel-img">
       <img class="defaultImg" src="/design-engine-blue.jpg">
       <img class="largeImg" src="/design-engine.jpg"> <!-- Larger in size then the default image -->

  </li>
  <li class="carousel-img">
       <img class="defaultImg" src="/design-engine-blue.jpg">
       <img class="largeImg" src="/design-engine.jpg">

  </li>
 </ul>

jQuery

    jQuery(document).ready(function(e) {

        jQuery('.carousel-img').hover(function() {
            jQuery(this).children('.defaultImg').stop().hide("fast"); 
            jQuery(this).children('.largeImg').show("fast");
         }, function() {
             jQuery(this).children('.largeImg').hide("fast");
             jQuery(this).children('.defaultImg').show("fast");

        });
    }); //ready

CSS

#carousel li {
    float: left;
    line-height: 1.7em;
    position: relative;
}

.largeImg {
    display: none;
}

jquery

回答 1

Stack Overflow用户

发布于 2014-06-02 11:02:24

在你的jQuery中使用css。我假设你们的照片是一样大小的。我使用100px作为宽度和高度的示例

.largeImg{
position:absolute;
z-index:1;
margin:0px;
display:none;
width:100px;
height:100px;
padding:0px;
}

.defaultImg{
position:absolute;
z-index:2;
margin:0px;
width:100px;
height:100px;
padding:0px;
}

JQuery

$('.carousel-img').bind("mouseenter", function () {
    var $this = $(this);
    $this.find('.defaultImg').hide();
    $this.find('.largeImg').show();
}).('.carousel-img').bind("mouseleave",function(){
    var $this = $(this);
    $this.find('.largeImg').hide();
    $this.find('.defaultImg').show();
});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23986679

复制

相似问题

问jQuery图像交换悬停在上方
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery图像交换悬停在上方EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery图像交换悬停在上方
EN