添加上使用jQuery

问题描述：

格的影响更大

朋友你好，我想加上我的div更多的效果，当我在<li>我的代码单击工作完美here但我想补充像fadeIn()和slideup()和slideDown()添加上使用jQuery

效果另一种具有后

$('#fade').fadeOut().fadeIn().html(p);

每一个“效果”将被激活：在此先感谢

那么你为什么不去做呢？你似乎知道如何使用jQuery方法？有关示例，请参阅：http：//api.jquery.com/fadeIn/。 – m90 2012-03-30 11:42:13

@ user1302513，这将是伟大的，如果你详细阐述它更多..什么或哪个div应该fadein（）fadeout（） – freebird 2012-03-30 11:44:37

尝试，但它不工作完美我想当前文本与fadeIn（）效果和下一个内容来与fadeOut（）效果 http://jsfiddle.net/m7mRx/1/ – user1302513 2012-03-30 11:47:06

答

You could do something like this:

HTML：

<ul> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
</ul> 

<div id="selected">cvb</div>

CSS：

div#selected { 
    float:left; 
    width:90%; 
    border:solid; 
    padding:10px; 
    font-size:2em; 
} 

ul { 
    margin:0; 
    padding:0; 
} 

ul li { 
    margin:2px 0; 
    padding:10px; 
    background:#999999; 
    color:#fff; 
    font-size:15px; 
    width:90%; 
    list-style:none; 
    cursor:pointer; 
} 

ul li:hover { 
    background:#CCCCCC; 
    color:black; 
}

的jQuery：

$(function() { 

    var $selected = $("#selected"); 
    $("ul li").click(function() { 

     var $li = $(this); 
     $selected 
      .stop(true,true) 
      .fadeOut(0) 
      .html($li.html()) 
      .fadeIn(2000); 

    }); 

});

感谢luv它：））.... – user1302513 2012-03-30 12:07:31

@ user1302513 - 没有问题= D唐不要忘记上传所有你喜欢的答案，并选择一个作为未来访问者接受的答案。 – 2012-03-30 12:09:04

答

您可以添加功能，例如“采取行动”。
为了确保不会出现质量效应循环，我建议使用.stop（）函数。（要查看其差异，请在li上单击多次，然后尝试带和不带.stop（）函数的代码）。

$('#fade').stop().fadeOut().fadeIn().html(p);

答

你也可以使用，

$('#lione').click(function() { 
    var p = $('#one').html(); 
    $('#fade').stop().slideUp(1000).slideDown(1000).html(p); 
}) 

$('#litwo').click(function() { 
    var p = $('#two').html(); 
    $('#fade').slideUp(1000).slideDown(1000).html(p); 
    $('#fade').html(p); 
})

相关推荐