jq 淡入淡出 滑動 焦點等實際使用

(1)

<div class="rowslistdiv">

  <div class="listdiv"> 

    <a class="most-visited"> <img src="images/sina.png"></a> 
    <div class="shadow" style="display: block;"><a class="linka" href="http://www.sina.com/" target="_blank"></a></div> 

   </div> 

</div

當有多個listdiv 的情況下 實現鼠標滑入show display: block滑出 show display: none的效果

$('.listdiv').hover(function(){ $(this).find('.shadow').fadeIn(); },function(){ $(this).find('.shadow').fadeOut(100); });

(2)

<div class="search">  
  <div class="ipt" id="ipt">
  <form name="linesearch" id="linesearch" >
    <div id="search-switch" class="search-engine">
    <!--沒有樣式  -->
     <a class="baidu" style="display:none">
      </a>
      </div>
      <div class="mrgleft" id="lineleft"> 
      <span class="" id="searchabtn">
      </span>
      <div id='searchdiv' style="float: right;display: none;position: relative;width: 50px;height: 50px;" onclick="linesearch.submit()"></div>
       <input id="search-kw" class="iputhover" name="word"  type="text" value="搜索" autocomplete="off">
       </div>
    
    <!--<div id="search-hotword" style="display: block;"></div>-->
  </div>


<ul id="search-menu" >
  <li><a href="#" class="so">360搜索</a></li>
  <li><a href="#" class="google">谷歌</a></li>
  <li><a href="#" class="baidu">百度 </a></li>
</ul>


  <div class="btn" id="s_btn" style="display:none">
    <a href="https://www.baidu.com/">搜索一下</a>
  </div>
</form>
</div> 

點擊下拉下圖標改變action和上面圖片。

var newclass=$("#search-switch>a").attr('class');
 var hostsearch="";//獲取搜索域名[百度，360，google]
  // var parameter="";
  //拿到search-switch 下面a的class值
  switch(newclass)
  {
    case 'so':
     hostsearch ="https://www.so.com/s?src=wisdomchrome_newtab_search&ie=utf-8";
      break;
    case 'google':
     hostsearch ="http://www.google.com.hk/search?client=aff-cs-360chromium&ie=UTF-8";
      break;
    case 'baidu':
     hostsearch ="https://www.baidu.com/baidu?&ie=utf-8";
     break;
    default:
        hostsearch ="https://www.baidu.com/baidu?&ie=utf-8";
       break;
}
document.linesearch.action=hostsearch;

到圖1的效果的實現代碼，通過動態改變css：

//可選擇搜索類型切換
$("#search-switch>a").click(function(){
    $("#search-menu").slideToggle("slow");
 });


$("#ipt").click(function(){
  $("#lineleft").removeClass("mrgleft");
    //搜索框效果


    $("#search-kw").removeClass("iputhover");
    $("#search-kw").css("margin-left","-35px");
    $("#search-kw").focus();


    $("#searchabtn").animate({left:"500px"},500);//搜索按鈕向右滑動
    $("#search-switch>a").css('display','block');


    $("#searchdiv").css('display','block');


 });