切换幻灯片左右元素组Javascript

我试图为搜索，语言和联系人选项创建一个小标题导航。（演示如下）切换幻灯片左右元素组Javascript

所有的元素都是可点击的。我不能管理内容在其中滑动，当其他元素被点击时移动其他图标并滑回。

PS：搜索栏已经在我的jquery，jQuery UI文档中滑动和返回（不工作在JSFiddle不知道为什么，但P标签不滑动。搜索栏正在与这样的代码：

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

    }); 
     });

）

下面是代码

HTML：

<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>

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（）方法，但不能这样做。如果你想使用自定义动画使用.animate（）方法 – quindimildev

我曾在你的联系人菜单的动画。
我很开心。
我这样做是因为我认为你想要的效果很好...

你会注意到我改变了你的代码了很多。
我真的不知道如何一个一个地解释所有的变化，所以随时提问。

看看我的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

切换幻灯片左右元素组Javascript

回答

相关问题