使用jQuery在div上添加更多效果

Question

朋友们，我想点击<li>我的代码工作正常here我希望在我的div上添加更多效果，但我想添加fadeIn() {{1}这样的效果}和fadeOut()以及slideup()

提前致谢

Answer 1

您可以这样添加功能：

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

在另一个“行动”之后，每个“效果”都将激活 为了确保不会出现大量的效果循环，我建议使用.stop（）函数。

如此:(要查看差异，请在li上单击多次，然后使用.stop（）函数尝试代码。）

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

Answer 2

的 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);

    });

});
​

Answer 3

您也可以使用，

$('#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);
})