Toggle左右の要素グループをスライドさせるJavascript

検索、言語、連絡先オプションのヘッダーナビゲーションを少し作成しようとしました。（下のデモ版）Toggle左右の要素グループをスライドさせるJavascript

すべての要素をクリックできます。他の要素がクリックされると、コンテンツがスライドインしたり、他のアイコンやスライドを移動したりすることはできません。

PS：検索バーは、jquery、jquery uiのドキュメント内でスライドしています（JSFiddleでは動作しません。理由はわかりませんが、pタグはスライドしません）。このようなコード：

<body> 
<nav> 
<div class="navIcon telefonIcon"><p class="telefonField">12 346 5</p><i class="fa fa-phone" aria-hidden="true"></i></div> 
<div class="navIcon lupeIcon"><input class="searchField" type="text" name="search"><i class="fa fa-search" aria-hidden="true"></i></div> 
<div class="navIcon globusIcon"><p class="globusField">DE | EN</p><i class="fa fa-globe" aria-hidden="true"></i></div> 
       </nav> 

       </body>

：ここ

$(function() { 
     $(".lupeIcon").click(function(){ 
      $(".searchField").addClass("searchFieldWidthExtender",2000) 
      $(".telefonField").hide("slide", {direction: "right"}, 2000); 
      $(".globusField").hide("slide", {direction: "right"}, 2000); 

    }); 
     });

）

はコード

HTMLです

CSS：

div.navIcon{ 
    float: left; 
    margin: 0 40px 0 0; 
    line-height: 95px; 
    padding: 0; 
    font-size: 20px; 
    color: red; 
     -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -ms-transition: all 1s; 
    -o-transition: all 1s; 
    transition: all 1s; 
    display: -webkit-box; 
} 
.searchField { 
    display: none; 
    height: 30px; 
    margin: 0 10px 0 0; 
    border: none; 
    border-radius: 30px; 
    box-shadow: inset 0 0 2px red; 

} 

.telefonField, .globusField { 
    display: none; 
    height: 30px; 
    margin: 0 10px 0 30px; 
    vertical-align: middle; 

}

Javascriptを：

 $(".telefonIcon").click(function(){ 
      $(".telefonField").addClass("displayInliner",2000) 
      $(".telefonField").show("slide", {direction: "right"}, 2250); 
      $(".searchField").hide(); 
      $(".globusField").hide("slide", {direction: "right"}, 2000); 
    }); 

     $(".lupeIcon").click(function(){ 
      $(".searchField").addClass("searchFieldWidthExtender",2000) 
      $(".searchField").show("slide", {direction: "right"}, 2250); 
      $(".telefonField").hide("slide", {direction: "right"}, 2000); 
<!--  $(".globusField").hide("slide", {direction: "right"}, 2000); -->    
         $(".globusField").hide(); 

    }); 
     $(".globusIcon").click(function(){ 
      $(".globusField").addClass("displayInliner",2000) 
      $(".globusField").show("slide", {direction: "right"}, 2250); 
      $(".telefonField").hide("slide", {direction: "right"}, 2000); 
      $(".searchField").hide("slide", {direction: "right"}, 2000); 

    });

Demo with Icons

出典

2016-10-05 maxal95

あなたはアニメーション（）メソッドと非表示と表示を使用しているが、あなたはそれを行うことはできません。カスタムアニメーションを使用したい場合は.animate（）メソッド – quindimildev

私はあなたの連絡先]メニューのアニメーションに取り組みました。
私はそれを楽しんだ。
あなたが望む効果が素晴らしいと思うので、私はそれをしました...

私はあなたのコードを多く変更したことに気づくでしょう。
私は本当にすべての変更を1つずつ説明する方法を知らないので、お気軽にお問い合わせください。

私のCodePenを見てください。

HTML

<body> 
    <nav> 
     <div class="field telefonField">12 346 5</div> 
     <div class="navIcon telefonIcon"> 
      <i class="fa fa-phone" aria-hidden="true"></i> 
     </div> 


     <div class="field searchField"> 
      <input type="text" name="search"> 
     </div> 
     <div class="navIcon lupeIcon"> 
      <i class="fa fa-search" aria-hidden="true"></i> 
     </div> 


     <div class="field globusField">DE | EN</div> 
     <div class="navIcon globusIcon"> 
      <i class="fa fa-globe" aria-hidden="true"></i> 
     </div> 
    </nav> 
</body>

CSS

div.navIcon { 
    float: left; 
    line-height: 95px; 
    padding: 0; 
    font-size: 20px; 
    color: red; 
} 
.fa{ 
    float: left; 
    line-height: 95px; 
    color: red; 
    padding: 0 6px; 
} 

.telefonField, 
.searchField, 
.globusField { 
    float:left; 
    display:none; 
    width: 0; 
    margin: 0; 
    color: red; 
    white-space:nowrap; 
    overflow:hidden; 
    line-height: 95px; 
} 

.searchField input{ 
    border: none; 
    width:0px; 
    border-radius: 30px; 
    box-shadow: inset 0 0 2px red; 
    outline: none; 
    padding: 0.3em 0.5em 0.1em 0.7em; 
}

jQueryの

var showDelay = 2000; 
var hideDelay = 2000;  // If you want to set a different hide delay 
var thisWidth = 0;   // Element width are different 
var searchField = false; // For the input exception 

$(".navIcon").click(function(){ 

    // Execute script only if «this» is not already displayed 
    if($(this).prev(".field").css("width") == "0px"){ 

     if($(this).prev(".field").hasClass("telefonField")){ 
      thisWidth = "63px"; 
      searchField = false; 
     } 
     if($(this).prev(".field").hasClass("searchField")){ 
      thisWidth = "248px"; 
      searchField = true; 
     } 
     if($(this).prev(".field").hasClass("globusField")){ 
      thisWidth = "59px"; 
      searchField = false; 
     } 

     // Show it! 
     $(this).prev(".field").animate({width:thisWidth},showDelay).show(); 

     // Hide the others 
     $(".field").not($(this).prev(".field")).animate({width:"0px"},hideDelay,function(){ 
      $(this).hide(); 
     }); 

     // Also animated the input width... 
     if(searchField){ 
      $(".searchField input").show().animate({width:"225px"},showDelay); 
     } 
    } 
});

出典

2016-10-05 17:38:44

ありがとう、あなたは素晴らしいです！完璧に動作します！ – maxal95

Toggle左右の要素グループをスライドさせるJavascript

答えて

関連する問題