我最近开始学习jQuery。我正在尝试为我的网站编写一个淡入淡出和淡出内容的脚本,因为我无法在网上找到它。
有我的脚本:http://jsfiddle.net/hf9xJ/3/
我的问题是,只有在点击每个链接至少一次(在一个会话中)后,脚本才能正常工作。之后,fadeOut()和fadeIn()完美地工作。
当我尝试删除时:
animate({
"left": "0%"
}, 500, 'linear',
整个剧本突然停止工作。
有谁知道如何解决这个问题,甚至更好地以更好的方式编写整个脚本?
谢谢!
答案 0 :(得分:0)
你的css
#content section {
position: absolute;
left:100%;
}
将左侧设为0
&安培;将它们设置为display:none
(除了第一个在负载上可见的我猜))
注意:fadeout正在进行第一次点击,但同时左边的动画:100%到左:0正在运行;动画左边是动画从左0到左0所以没有任何可见的发生,你只看到fadein动画&事实上,如果你只想要一个淡化效果,你为什么还需要动画左动画呢?
答案 1 :(得分:0)
您必须将左:100%从 #content部分:nth-child(1)替换为 left:0%并添加此项css
#content .active{
z-index: 100;
}
将js更改为此
$("#content section").css("visibility", "hidden")
.each(function(index, element) {
elem=$(element);
if (!(elem.hasClass("active"))) {
elem.fadeOut();
}
});
$("#content .active").css("visibility", "visible").fadeIn();
$('a').on('click', function (event) {
//event.preventDefault();
var sectionId = $(this).attr("data-section"),
$toSlide = $("#content section#" + sectionId),
$fromSlide = $('.active');
if (!($toSlide.hasClass("active"))) {
$fromSlide.fadeOut().css("visibility", "hidden").removeClass("active");
$toSlide.addClass("active").css("visibility", "visible").fadeIn();
}
});