让动画切换上点击

-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

让动画切换上点击

回答

相关问题