DIV使用javascript上下移动 [英] DIV moving up and down using javascript

问题描述

美好的一天，
我正在建立一个网站，我想让一个div向下移动并点击一下（点击另一个div区域）。
它关注页面内部带有帐户图片的标题（标题包含从左到右：徽标，水平菜单，购物车和帐户符号）

Good day, I'm building a website where I would like to have a div moving down and back up on a click(clicking on another div area). It regards the header of a page with an account image inside (the header contains from left to right: logo, horizontal menu, shopping cart and account symbol)

当我点击帐户符号时，我希望标题向下滑动（60像素），我想要另一个div（其中包含帐户相关链接）显示在刚下滑的标题上方。
我已经取得了一些成绩，但我真的不满意：

when I click the account symbol I want the header to slide down (60 pixels) and I want another div (with account related links in it) to show up above the header that just slid down. I've achieved something but I'm really not happy with it:

<script>
    jQuery(document).ready(function($){
        $(".account").click(function);
            $("#accountbar").slideToggle( "slow");
            $("#topheader").toggleClass("topheader topheaderdown");
            $("#contentarea").toggleClass("content contentdown");
        });
    });
</script>

1）这样做会加载新的帐户栏（高度为60px）并将其向下滑动。

1) So what this does it loads the new account bar (height 60px) and slides this one down.

2）它显示另一个60px的topheader（css样式规则顶部：60px）

2) It displays the topheader down another 60px (css style rule top: 60px)

3）当显示帐户栏和topheader时，它还显示其余内容（主要内容）比正常低120个像素（默认情况下，此值为60px，因此仅适用于topheader）

3) It also displays the rest of the content (the main content) down 120 pixels lower than normal when both the account bar and topheader are being displayed (by default this value is 60px, so only for the topheader)

我希望在点击帐户图片时平滑地向下滑动和备份。我到目前为止（为了顺利地向下移动topheader部分）：

I want things to "smoothly" slide down and back up when clicking on the account image. I got this far (for the smoothly moving down the topheader part):

<script>
    jQuery(document).ready(function($){
        $("#account").on('click',function(){
            $("#accountinner").toggle(function() {
                $("#topheaderid").animate({ top: '-=60px' }, 500);
            },function() {
                $("#topheaderid").animate({ top: '+=60px' }, 500);
            })
        });
    });
</script>

问题1：以上每次点击它时，只会进一步向下移动topheader（没有按照指定再次回升60px）...

PROBLEM 1: the above is only moving the topheader down further and further every time I click on it (not going back up 60px again as specified)...

问题2：上面也以某种方式将我的账户图像向右滑动（屏幕外）

PROBLEM 2: The above is also somehow sliding my account image to the right (out of screen)

我也希望在此实施其他规则，以便在点击时，topheader可以顺利地向下移动60px，在顶部显示新的div中的帐户导航（帐户栏）和内容（类内容）向下移动60px。如前所述，使用slidetoggle和toggleclass可以工作，但我更喜欢动画功能，因为这看起来很棒。
我已经从第一个脚本中实现了这些规则，但它并没有顺利发生，并且topheader只是继续下降......

And I would like to implement the other rules in this too, so that on a click the topheader just moves down smoothly with 60px, up the top appears the account navigation in a new div (accountbar) AND the content (class content) moves down another 60px. As said before using "slidetoggle" and "toggleclass" works but I much rather have the "animate" function do the job as this looks awesome. I have implemented these rules from the first script but it does not happen "smoothly" obviously and the topheader just keeps on going down...

我希望这是足够的信息，有人可以帮助:)
当这工作时，我想用一个搜索按钮来扩展它，并在点击头顶下方显示。

I hope this is enough info and someone can help :) When this works I want to extend this with a search button as well that appears below the topheader on click.

https://jsfiddle.net/d14tcb9n

谢谢。

推荐答案

您可以触发以下动画：

jQuery(document).ready(function($){
  $("#account").on('click',function(){
  if($(this).hasClass('open')) {
         $("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false });
        $("#accountbar").animate({ height: '0' }, { duration: 500, queue: false });
        $('#contentid').animate({ marginTop: '60px' }, { duration: 500, queue: false });
        $(this).removeClass('open');   
  } else {
        $("#topheaderid").animate({ top: '60px' }, { duration: 500, queue: false });
        $("#accountbar").animate({ height: '60px' }, { duration: 500, queue: false });
        $('#contentid').animate({ marginTop: '120px' }, { duration: 500, queue: false });
        $(this).addClass('open');  
  }


  });
});

从隐藏的div中删除display none并将高度更改为0
demo：< a href =https://jsfiddle.net/o1cvho6m/ =nofollow noreferrer> https://jsfiddle.net/o1cvho6m/

remove the display none from the hidden div and change the height to 0 demo:https://jsfiddle.net/o1cvho6m/

这篇关于DIV使用javascript上下移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！