從右側滑動（jQuery）

-1

$(".slide-left") 
    .css("margin-left",-$(this).width()) 
    .delay(400) 
    .animate({ 
     marginLeft:0 
}, 900);

但是，當我嘗試從右側，沒有任何反應！這似乎是邏輯代碼，我在這裏顯然缺少什麼？

$(".slide-right") 
    .css("margin-right",-$(this).width()) 
    .delay(400) 
    .animate({ 
    marginRight:0 
}, 900);

來源

2013-10-10 Omar Shizzle

它會更容易使用CSS3動畫和安裝使用jQuery – Conqueror

非常類似的問題類，有一個答案做到這一點... HTTP：//計算器.com/questions/596608/slide-right-to-left – SridharVenkat

儘管使用CSS3動畫方法不會失去舊的瀏覽器兼容性嗎？ –

沒有剩下的代碼就很難給出確切的答案，但我會建議使用左邊的margin來動畫右邊。

$(".slide-right") 
    .css("margin-left",0) 
    .delay(400) 
    .animate({ 
    marginLeft:$(this).width() 
}, 900);

JS小提琴：http://jsfiddle.net/JBgLc/1/

來源

2013-10-10 02:22:41 heardy

margin-right只對周圍或附近.slide-right元件的效果。基本上，你不會看到發生了什麼事情，除非你有其他元素的權利。不過，重要的是要注意，這對.slide-right本身沒有影響，只是周圍的元素。

DEMO： http://jsfiddle.net/dirtyd77/74JtL/

一種更好的方式去了解這將是使用right代替margin-right，但是，你還需要使用position這可以通過display:inline;看着演示來更好地理解：

$(function(){ 
    $(".slide-right") 
    .css("right",$(this).width()) 
    .delay(400) 
    .animate({ 
    right:0 
}, 900); 
});

DEMO： http://jsfiddle.net/dirtyd77/74JtL/2/

來源

2013-10-10 02:24:12 Dom

使用負margin-right通常不起作用 - 最好使用積極的margin-left，因爲margin-right僅適用於以下對象：它不會影響分配給它的對象的位置。

用途：

.css("margin-left",$(this).width())

代替：

.css("margin-right",-$(this).width())

看到這個JSFiddle。

來源

2013-10-10 02:28:38

由於代碼有點泛泛，但仍然需要CSS動畫解決方案，所以我使用複選框而不是jQuery來附加動畫。您可以通過向關鍵幀中的margin-left屬性添加一個負數來更改幻燈片的方向。我只爲webkit設置了它，但它可以很容易地擴展到其他瀏覽器。

CSS：

input[type="checkbox"]:checked + .slide-right{ 
-webkit-animation-delay:400ms; 
-webkit-animation: slider 900ms; 
} 

div{ 
width:50px; 
height:50px; 
border:1px solid black; 
} 

@-webkit-keyframes slider{ 
100%{margin-left:400px;} 
}

http://jsfiddle.net/rfWtD/

來源

2013-10-10 02:33:25 Conqueror

從右側滑動（jQuery）

回答

相關問題