Home/ Questions/Q 7977275
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T09:09:01+00:00

i have garage gate image. i want when click on button image should move

  • 0

i have garage gate image. i want when click on button image should move up.
but problem is that when i click on button image don’t move but slide hide from bottom of the image. here is my code

<script type="text/javascript">
$(document).ready(function(){
  $(".open").click(function(){
    $(".gate").slideToggle(3000)
  });
});
</script>

<body>

<div class="main">
<a class="open" >Home page</a>
<div class="gate"></div>
</main>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You shouldn’t use .slideToggle(), what it does is to hide/show the element by animating the height value.

    I’ve prepared and example using .animate() to animate the gate opening up when you press the “homepage” word:

    See this working Fiddle!

    HTML

    <body>
    <div class="main">
        <a class="open">Home page</a>
        <div class="gate"> </div>
    </div>
</body>

    JQUERY

    $(document).ready(function(){
  $(".open").click(function(){
      $(".gate").animate({
          "top" : "-=" + $(".gate").outerHeight(true)
      }, 3000);
  });
});

    The position where the animation ends, depends of your final goal, and your applied CSS as well!

    • 0