动态滑动div

Question

我是jQuery的新手，所以任何帮助表示赞赏。

我“之类的”，试图重现此： http://tympanus.net/Tutorials/HoverSlideEffect/

不过，我想用DIV标签在他们的网页内容VS图像。我在为我的女朋友沙龙在网站上，所以我想的内容，当一个人选择服务>>联系>>团队改变...等

我也不想框滑动时鼠标结束了。我只想在单击按钮时触发更改。

我八九不离十试图乱用这个代码，但它在我目前的状态有一点复杂，我。我写我自己的代码，该代码排序的工作，但这里是我的问题：

如果我打开网页，然后选择第一个按钮，一切都很好。因为我基本上已经把div滑出来了，另一个滑回原位。但是，如果我按钮1到按钮2，它不起作用。我不知道如何使div标签“通用”，所以无论目前的框中有什么内容，新的内容将取代它。

我明白“这个”，但不知道如何应用它。我确实编码学校，但只是给了我一个基本的了解。

我复制的代码，但它不工作的jsfiddle = http://jsfiddle.net/xrXLg/

$（文件）。就绪（函数（）{

$("#contact").css({opacity: "0", width: "0", left: "0"}); 

$(".run").click(function(){ 
    $("#services").animate({opacity: "1", width: "450"}, 400); 
    $("#contact").animate({opacity: "1", width: "600"}, 400); 
}); 

}）;

Answer 1

使用jQuery很容易。这是一个容器的例子。但是，您可以添加尽可能多的。他们将同时工作。滑动将在点击鼠标时开始。

HTML部分：

<div class="container"> 
    <div class="slide active" style="background:red;">Slide 1</div> 
    <div class="slide" style="background:yellow;">Slide 2</div> 
    <div class="slide" style="background:green;">Slide 3</div> 
    <div class="slide" style="background:blue;">Slide 4</div> 
</div> 

CSS部分：

.container {position:relative; width: 400px; height: 200px;} 
.slide {position:absolute; left:0px; top:0px; width: 100%; height: 100%; line-height:200px; text-align:center; display:none;} 
.slide.active {display:block;} 

JS部分：

jQuery('.container').bind('click', function(){ 
    var container = jQuery(this), slides = container.children('.slide'); 
    var current = container.children('.slide.active'); 
    var currentID = slides.index(current); 
    var nextID = currentID < slides.length - 1 ? currentID + 1 : 0; 
    var next = jQuery(slides[nextID]); 
    if (jQuery('.container .active').length == 2) return; 
    next.addClass('active'); 
    next.css('opacity', 0); 
    current.animate({ 
     left: -container.width(), 
     opacity: 0 
    }, 1000, function(){ 
     current.removeClass('active'); 
     current.css({left: 0, opacity: 1}); 
    }); 
    next.animate({ opacity: 1 }, 1000); 
}); 

这里是jsfiddle.net的例子 - http://jsfiddle.net/qe4Tt/

Answer 2

您的代码工作正常。 jQuery库不包含在你的jsFiddle中。我现在补充说。以下是更新的小提琴的链接：http://jsfiddle.net/xrXLg/2/。在这里，我将你的代码，因为我不能与它的jsfiddle链接提交答案，除非我还包括一个代码片段：

$(document).ready(function(){ 
    $("#contact").css({opacity: "0", width: "0", left: "0"}); 
    $(".run").click(function(){ 
     $("#services").animate({opacity: "1", width: "450"}, 400); 
     $("#contact").animate({opacity: "1", width: "600"}, 400); 
    }); 
});