讓動畫切換上點擊

-1

<span id="second" class="content1" style="width:0px; display:inline-block; overflow:hidden; float: left; white-space:nowrap;"> 
        <p style="color:blue; background-color: #b5bdc8;">Camera Reviews</p> 
        </span> 
        <a href="#" class="slide1" style="float: left;"><li class="laptop"></li></a>

和腳本是：

$(document).ready(function() { 
      $('.slide1').click(function() { 
      $('#second').animate({ 
       width: '120px', 
      }, 1000); 
     }); 
});

的問題是，我要顯示BLOCK列表...和工作，因爲它是再加上我希望動畫切換時，我的列表隱藏/顯示

工作代碼在這裏點擊：http://jsfiddle.net/gVjFs/81/

來源

2013-02-07 emcee22

恩，首先嚐試從HTML中分離出CSS。 – Jan

您能詳細說明您的預期行爲嗎？我不太喜歡。 – Jared

好的，我已經在這裏分離了html ffrom html：http://jsfiddle.net/gVjFs/81/。現在我想要列表顯示塊和動畫切換點擊顯示隱藏（對於每個列表項） – emcee22

我將忽略狡猾的標記（其中包括<span>以內的<li>）。你可以在這裏使用toggle()：

$('.slide1').toggle(function() { 
    $('#second').stop().animate({ 
     width: '120px', 
    }, 1000); 
}, function(){ 
    $('#second').stop().animate({ 
     width: '0', 
    }, 1000); 
});

來源

2013-02-07 16:02:22 boz

感謝您的回答 – emcee22

@PaulHarbuz - 無後顧之憂，有幫助嗎？ – boz

是伴侶。完美的答案！ – emcee22

在您的JSFiddle中，您顯示您將CSS設置爲block爲ul li。但是這不會起作用，因爲您的HTML中沒有任何ul標籤。它也似乎是您正確使用li標籤。 li標籤就像td標籤：它在其父標籤之外沒有意義。對於li這將是一個ol或ul標籤。如果你想要一個小圓圈點擊，請使用一個小圓圈的圖像。此外，將span/a部分包裝在div中。這會給你免費的屏幕顯示。

來源

2013-02-07 16:01:34 jwatts1980

使用點擊（）和toggleClass() 東西的組合是這樣的：

$("#click").click(function() { 
    $(this).toggleClass('whatever'); 
});

來源

2013-02-07 16:03:14 dezman

$(document).ready(function() { 
    $('.slide1, .slide2, .slide3, .slide4, .slide5').click(function() { 
     var elem = $('.' + $(this).attr('class').replace('slide','content')), 
      width = elem.width(); 
     elem.animate({ 
      width: width === 0 ? '120px' : 0, 
     }, 1000); 
    }); 
});

demo

我建議你設置一個slide類到所有.slide1, .slide2, .slide3 -elements。

來源

2013-02-07 16:07:06 yckart

讓動畫切換上點擊

回答

相關問題