http://micheresources.com/html/j-crew-slider/
我想知道如何反转动画?当您将鼠标悬停在左侧的每个导航项上时,您会注意到当您将鼠标悬停在下一个元素上时,黑色条是如何收缩到左上角而不是向左滑动的。我怎样才能使它像滑入时一样滑出?
黑条是一个 <a>
activeSlide
时附加到每个导航项的标签类在悬停时应用,然后在下一次悬停时删除。
jQuery:
$(document).ready(function () {
function activateItem(index) {
$('#slideshow-nav').children('li').each(function (i) {
var $item = $(this);
if (i == index) {
if ($item.children('a').length == 0) {
$item.append('<a href="#">' + titles[i] + '</a>');
}
} else {
$item.children('a').hide(400, function() {
$item.children('a').remove();
});
}
});
}
var titles = ["New Styles", "June PVE", "Double Hostess Rewards"];
$("#slideshow").before("<ul id='slideshow-nav'></ul>")
.cycle({
fx: "scrollVert",
rev: "scrollVert",
speed: 600,
timeout: 0,
pagerEvent: "mouseover",
pager: "#slideshow-nav",
pagerAnchorBuilder: function (index) {
return "<li><span>" + titles[index] + "</span></li>";
},
onPagerEvent: function (index) {
activateItem(index);
}
});
activateItem(0);
});
CSS:
#slideshow-nav li a {
background-color: #000;
width: 285px;
margin-top: -1px;
padding: 30px 10px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
color: #fff;
text-decoration: none;
position: absolute;
left: -285px;
-webkit-transition: left 500ms ease;
-moz-transition: left 500ms ease;
-o-transition: left 500ms ease;
transition: left 500ms ease;
}
#slideshow-nav li.activeSlide a { left: 0; }
最佳答案
请参阅下面代码中的重要部分,我认为您只需要将时间添加到 .remove()
$(document).ready(function () {
function activateItem(index) {
$('#slideshow-nav').children('li').each(function (i) {
var $item = $(this);
if (i == index) {
if ($item.children('a').length === 0) {
$item.append('<a href="#">' + titles[i] + '</a>');
}
} else {
$item.children('a').remove('slow'); // <-----Important bit
}
});
}
var titles = ["New Styles", "June PVE", "Double Hostess Rewards"];
$("#slideshow").before("<ul id='slideshow-nav'></ul>")
.cycle({
fx: "scrollVert",
rev: "scrollVert",
speed: 600,
timeout: 0,
pagerEvent: "mouseover",
pager: "#slideshow-nav",
pagerAnchorBuilder: function (index) {
return "<li><span>" + titles[index] + "</span></li>";
},
onPagerEvent: function (index) {
activateItem(index);
}
});
activateItem(0);
});
关于css - 反向 CSS3 过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17074989/