在點擊幻燈片寬度100％

Question

我有這樣的代碼：

$('button').click(function(){ 
 
    $('.slide').animate({ 
 
     width: "450px"; 
 
     display: block; 
 
    }); 
 
});

.slide { 
 
    width: 0px; 
 
    height: 450px; 
 
    background-color: blue; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="slide"></div> 
 

 
<button>Slide the div</button>

當我按一下按鈕我想​​出現向左像幻燈片。我的寬度div爲width: 0px。然後在jQuery中這個div會得到width: 450px。

Answer 1

您在animate內有一些語法錯誤;應該是,而button沒有類，因此click事件從未執行過。另外，您不能爲display屬性設置動畫。

下面是更新後的代碼片段：

$('.open-menu').click(function(){ 
 

 
      $('.slide').animate({ 
 
       width: "450" 
 
      }); 
 

 
});

.slide { 
 
    width: 0px; 
 
    height: 450px; 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="slide"></div> 
 

 
<button class="open-menu">Slide the div</button>

Answer 2

有你的代碼的幾個問題：

• Animate不會採取display財產的照顧。
• 點擊處理程序設置應封裝在jQuery ready function中。
• 按鈕需要類別open-menu。
• animate參數中的對象屬性不應以分號結尾。

查看下面的工作示例。

$(function() { 
 
    $('.open-menu').click(function(){ 
 
     $('.slide').animate({ 
 
      width: "450px" 
 
     }); 
 
    }); 
 
});

.slide { 
 
    width: 0px; 
 
    height: 450px; 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class="open-menu">Slide the div</button> 
 
<div class="slide"></div>