Question

我正在尝试实现图像交换效果，并且似乎无法让它在没有跳跃的情况下交换回原始图像（滑出，进出，进入...）什么是最好的完成方式这个？

<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;
}

Answer 1

将css与jQuery一起使用。我假设你的照片大小相同。我使用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();
});

jQuery Image Swap徘徊

1 个答案: