JS腳本不能正常工作

Question

JS代碼：

function showCaption() { 
    var captionVis = $('.grey-box-caption-text').css('display');  
    if(captionVis = "none") { 
     $('.grey-box-caption-text').width(0); 
     $(this).find('.grey-box-caption-text').show().animate({'width': '464px'},750);} 
    } else { 
     $(this).find('.grey-box-caption-text').animate({'width': '0'},750, 
                function(){$(this).hide();}); 
    } 
}; 

$('.caption-container').click(function() { 
    showCaption(); 
    return false; 
    } 
); 

HTML代碼：

<div class="one-half column home-three-img"> 
    <div class="caption-container"> 
     <div class="grey-box-caption"> 
     </div> 
     <div class="grey-box-caption-text">This is a caption test - Hopefully this works 
     </div> 
    </div> 
    <img src="images/3.jpg"> 
</div> 

這樣可不行，我一個JS小白。請幫忙。

我試圖讓標題部分從左向右滑出。當我點擊父容器時，什麼也沒有發生。當我再次點擊時，我期待標題能夠拍攝出來並隱藏起來。

我有Jquery正確加載，並有一個document.ready函數工作。

鏈接到WIP http://clients.pivotdesign.com/dev/annual_report_2014/index.html

Answer 1

的一個大問題是，this值不會在你「showCaption」功能進行設置。添加return false;該函數的末尾：

function showCaption(){ 
    var captionVis = $('.grey-box-caption-text').css('display');  
    if (captionVis == "none") { 
     $('.grey-box-caption-text').width(0); 
     $(this).find('.grey-box-caption-text').show().animate({'width': '464px'},750); 
    } 
    else { 
     $(this).find('.grey-box-caption-text').animate({'width': '0'},750, function(){ 
      $(this).hide(); 
     }); 
    } 
}; 

，然後更改處理程序分配：

$('.caption-container').click(showCaption); 

另外請注意，您在if聲明試驗是不正確的：使用==或===比較。

Answer 2

我從Pointy修改了一下CodePen，它應該用較少的代碼做同樣的事情。

爲什麼灰盒子在SO演示中增加了這裏的高度，我不知道。在this CodePen它沒有使用這個「bug」。

function showCaption() { 
 
    var $graybox = $('.grey-box-caption-text'); 
 

 
    $graybox.animate({ 
 
    width: 'toggle', 
 
    opacity: 'toggle' 
 
    }, 'slow'); 
 
}; 
 

 
$(function(){ 
 
\t $("#wrapper").on("click", showCaption); 
 
});

.grey-box-caption { 
 
    min-height: 3em; 
 
    min-width: 20px; 
 
    background-color: #bbb; 
 
    display: inline-block; 
 
} 
 
.grey-box-caption-text { 
 
    display: none; 
 
    padding: 1em; 
 
    font-family: sans-serif; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class=grey-box-caption> 
 
    <div class=grey-box-caption-text> 
 
     Hello World this is some text. 
 
    </div> 
 
    </div> 
 
</div>