JS幻燈片div類不工作 - 簡單問題

我有一個按鈕，點擊後會滑動一個名爲「內」的div。小提琴在這裏：更新 - http://jsfiddle.net/NfXTY/1/JS幻燈片div類不工作 - 簡單問題

問題在這條線上的某處var $marginLefty = $('.inner');。

我也想知道如何以其他方式啓動動畫，所以當您第一次滑動時單擊它並再次單擊會將其滑回。

來源

2013-09-27 DT.DTDG

你給'保證金左：0'它已經是0 –

@Ar unPJohny：這並不完全回答我遇到的問題：/ –

這就是爲什麼它被添加爲評論而不是答案 –

.inner需要的margin-left:350px;

來源

2013-09-27 01:02:16

我在http://jsfiddle.net/NfXTY/2/更新您的小提琴起點。您在$marginLefty.outerWidth()處缺少+'px'。它應該是$marginLefty.outerWidth()+'px'。

來源

2013-09-27 01:02:39 PHPglue

另外，請注意，您不需要'$'符號來在JavaScript中聲明變量。 – PHPglue

謝謝@PHPglue！此外，而不是做一個'$（this）.next（）;'什麼是它再次選擇特定的類？即：如果我想讓動畫的「內部」類，但內部不能被鏈接，因爲它是在文檔的其他地方。 –

是您正在使用赦免定位......因認爲保證金左不工作....使用上的問題，而不是left

<div class="inner" style="left: 350px;">Animate this element's margin-left style property</div>

和

$(document).ready(function() { 
    $('#slidemarginleft button').click(function() { 
     var $marginLefty = $(this).next(); 
     $marginLefty.animate({ 
      left: parseInt($marginLefty.css('left'), 10) == 0 ? $marginLefty.outerWidth() : 0 
     }); 
    }); 
});

演示：Fiddle

來源

2013-09-27 01:09:43

謝謝Arun！現在我該如何使用'var $ marginLefty = $（。inner）;'而不是'var $ marginLefty = $（this）。next（）;'因爲內部div不能被鏈接 - 它將坐在頁面的底部。謝謝！ –

@ DT.DTDG使用'var $ marginLefty = $（'。inner'）;' –

完美，謝謝。忘記單引號:) –

內部類不正確。如果你想設置利潤率左應設置左是0，而不是正確的：0，所以.inner類應該是

.slide .inner { 
     background-color: #44CC55; 
     bottom: 0; 
     color: #333333; 
     height: 36px; 
     left: 0; 
     padding: 6px; 
     position: absolute; 
     width: 338px; 
    }

或者保持設定正確的價值，你應該設置margin - 右值從右滑動至左側，像這樣：

$(document).ready(function() { 
     $('#slidemarginleft button').click(function() { 
     var $marginLefty = $(this).next(); 
     $marginLefty.animate({ 
      marginRight: parseInt($marginLefty.css('marginRight'),10) == 0 ? 
      $marginLefty.outerWidth() : 
      0 
     }); 
     }); 
    });

小提琴鏈接：fiddle

來源

2013-09-27 01:23:51 iamght

JS幻燈片div類不工作 - 簡單問題

回答

相關問題