如何使用jquery從左到右或從右到左動畫2個CSS佈局？

我的jQuery級別是業餘的，現在我努力用幻燈片解決這個問題，我知道如何使淡出或淡入淡出工作與變量，但我不能從左到右或從右到左的動畫製作2種不同的佈局與下一個屬性：如何使用jquery從左到右或從右到左動畫2個CSS佈局？

1.第一個佈局是一個活動佈局，display:block; 2.第二個佈局（下一個按鈕按下時顯示的滑動/佈局，但同時移除第一個佈局）不是活動幻燈片display:none;

在這裏，我遇到問題：

$('.next').click(function(){ 
var currentSlide=$('.active-slide'); 
var nextSlide=currentSlide.next(); 
currentSlide.removeClass('active-slide'); 
nextSlide.addClass('active-slide'); 
});

圖片附能見度： image

網站的鏈接，瞭解更多信息： Website

來源

2014-11-04 Sorin Chihaia

向我們展示你的HTML和樣式 – 2014-11-04 20:52:32

你想要的圖像與淡出滑動或者只是移動一個大的div內的項目？ – Demodave 2014-11-04 20:55:19

[鏈接] http://sorfilm.byethost8.com/瞭解更多信息我附上鍊接頁面。在一個大的div內移動項目，但有2種不同的佈局。 – 2014-11-04 21:14:16

在這裏你去。添加一個內部的div，如：

<div class="slide1"> 
    <div class="slide-inner"> 
     ...... 
    </div> 
</div>

CSS：

.slide-inner { 
    left: 0; 
    position: absolute; 
    width: 100%; 
} 

.slide1 { 
    overflow: hidden; 
    position: relative; 
}

的jQuery：

jQuery(document).ready(function(){ 
    var totalWidth = 0; 
    var select = jQuery('.slide1').find('.slide-inner > div'); 
    select.each(function(index) { 
     totalWidth = +(totalWidth)+(+$(this).outerWidth(true)); 
    }); 

    jQuery('.slide-inner').width(totalWidth); 

    $('.next').click(function(){ 
     var currentSlide=$('.active-slide'); 
     var nextSlide=currentSlide.next(); 
     //currentSlide.removeClass('active-slide'); 
     //nextSlide.addClass('active-slide'); 

     // .position() uses position relative to the offset parent, 
     var pos = nextSlide.position(); 

     // .outerWidth() takes into account border and padding. 
     var width = nextSlide.outerWidth(); 

     //show the menu directly over the placeholder 
     jQuery('.slide-inner').animate({"left":(pos.left + width) + "px"}, "slow"); 
    }); 
});

來源

2014-11-14 12:29:42 Aryan

它不工作的人，也許你可以幫助我在小提琴上的視覺例子。謝謝 – 2015-04-19 17:43:51

如何使用jquery從左到右或從右到左動畫2個CSS佈局？

回答

相關問題