添加上使用jQuery

格的影響更大

朋友你好，我想加上我的div更多的效果，當我在<li>我的代碼單擊工作完美here但我想補充像fadeIn()和slideup()和slideDown()添加上使用jQuery

效果另一種具有後

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

每一個「效果」將被激活：在此先感謝

來源

2012-03-30 user1302513

那麼你爲什麼不去做呢？你似乎知道如何使用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); 

    }); 

});

來源

2012-03-30 11:55:49

感謝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);

來源

2012-03-30 11:47:18 funerr

你也可以使用，

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

來源

2012-03-30 11:59:07 freebird

添加上使用jQuery

回答

相關問題