動態滑動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); 
    }); 
});