jquery - 如何仅应用过渡定义的元素，而不是其子元素？//简单的 Accordion

Question

我处于这样一种情况，我需要在 li 的宽度上使用过渡，而不是在其子级 img

上使用

li 元素中有小图片。当用户悬停的 li 元素 width 正在扩展内部图像时。

我正在尝试使用 no transition 扩展图像，但它的父级 li 需要使用 transition 扩展。

Here is jsFiddle example.

CSS:

ul.images { position:fixed; top:0px;left:0px; width:2660px; }
  ul.images li { 
    float:left;
    margin-right:1px;
    background: red;
    overflow:hidden;
    height: 500px;
    padding:10px;
    width:50px; 
-webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
        transition: all 0.5s ease;
}

ul.images li img { 
    float:left; width:100%; height: auto;

 /* this doesn't work */
-webkit-transition: all 0s;
   -moz-transition: all 0s;
     -o-transition: all 0s;
    -ms-transition: all 0s;
        transition: all 0s;
}
ul.images li.active { float:left; width: 270px; }
ul.images li.active img { height: 100%; }

jQuery:

$('ul.images li').first().addClass('active');
$('ul.images li').bind({
    mouseenter: function() {
        $('ul.images li').removeClass('active');
        $(this).addClass('active');
    }
});

Answer 1

您可以尝试为 px 而不是 % 的图像设置固定的 width。因为 % 将采用容器。

ul.images { position:fixed; top:0px;left:0px; width:2660px; }
ul.images li { 
    float:left;
    margin-right:1px;
    background: red;
    overflow:hidden;
    height: 500px;
    padding:10px;
    width:50px; 
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    overflow:hidden;
}

ul.images li img { 
    float:left; width:50px; height: auto;
}
ul.images li.active { float:left; width: 270px; }
ul.images li.active img { width:270px; height: 100%; }

并在 li 上添加 overflow;hidden。

DEMO

希望我没听错。祝你好运!