How to fix the CSS of a JQuery Slide Element_问答_开发者

How to fix the CSS of a JQuery Slide Element

开发者 https://www.devze.com 2023-03-11 08:33 出处：网络

I have built a jquery slide on hover event. At the bottom on the page, I have the slider element that will expand when the mouse hovers the element. I have a tab that will stick out the top of the element to remind the user that the functionality exists. This tab is causing me many problems and when you hover over the tab, the element will expand and contract repeatedly. I have tried editing the CSS and it worked correctly when I removed margin-top but this is not how the design was intended. I have tried to add a DIV to solve this as well which did not work. Can you help me get the tab to work correctly?

I am using JQuery 1.5.1

Here is the HTML:

<body>   
  <div class="Livwidget">
  <div class="tab"></div>
   </div>
</body>

Here is the CS开发者_JS百科S:

.Livwidget{
  background: #000;
  bottom: 0;
  left: 0;
  margin-left: 5%;
  margin-right: 5%;
  padding-top: 3px;
  position: fixed;
  width: 90%;
 }


 .tab{
  background: #000;
  height: 30px;
  margin-left: 0;
  margin-top: -30px;
  width: 135px;
 }

Here is the JS:

<script> 
    $(document).ready(function(){
        $(".Livwidget").hover(makeTall,makeShort);
    }); // close document.ready

    function makeTall(){  $(this).animate({"height":250},350);}
    function makeShort(){ $(this).animate({"height":5},350);}
</script>

Any help would really be appreciated. I have spent hours playing around to try to fix this and can't seem to figure it out.

Add an if/else statment for a variable called var activeAnimation, it should be declared as 0 outside of your script, then only allow animation if it is 0, as soon as it starts the animation set activeAnimation = 1, then at the end of your animation, make the callback include a function to make activeAnimation = 0

Try this http://jsfiddle.net/Qsqrc/