如何使对象再次点击时再次最小化

我有一个小表单，当用户访问我的网页时展开，然后在几秒钟后最小化。然后当按钮被点击时，它再次膨胀。我一直在尝试添加代码，以便在按钮再次单击时尽量减少它，但我一直在打破它。我是一个jQuery初学者，任何人都可以帮忙吗？如何使对象再次点击时再次最小化

小提琴：http://jsfiddle.net/ambersabre/vkfos3yn/

HTML：

<div id="fixed-form"> 

    <div style="width: 100%; height: 43px"> 
     <div id="btnclick" class="contactbtn" /> 
     <div style="padding-top: 12px; font-size: 14px; padding-left: 26px; color: #fff; font-weight: bold; text-transform: uppercase">send us an email</div> 
    </div> 
</div> 
<div class="content" id="testdiv"> 

    <div style="margin: 0 auto; width: 340px; height: 130px; padding-top: 5px"> 

    <div style="padding-top: 10px"> 
     <div style="float: left; width: 165px; height: 37px"> 
      <input type="text" class="float-input" name="contactName" id="contactName" value="" class="txt requiredField" placeholder="EMAIL ADDRESS:" /> 
     </div> 

     <button name="float-submit" type="submit" class="float-submit" style="margin-top: 8px; margin-left: 10px" value="float-submit" />Submit</button> 
    </div> 
</div>

CSS：

#fixed-form { 
    position: fixed; z-index: 1; 
    right: 5px; 
    bottom: 0; 
    width: 400px; 
} 
.content { 
    background-color: grey; 
    padding: 10px; 
    width: 400px; height: 180px; 
    font-family:Lato; color: #fff; font-weight: bold; border: 2px solid grey; 
    font-size:14.5px; position: relative; z-index: 1; border-radius: 10px 0 0 0; 
} 
.contactbtn { 
    width: 192px; position: relative; z-index: 1; float: right; 
    height: 43px; background: grey; 
} 
.float-input { 
    width: 100%; height: 100%; border: none; background: #46A2A2;background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0; 
}

脚本：

$(document).ready(function() { 
    $(function() { 
     setTimeout(function() { 
      $("#testdiv").slideToggle(1500); 
     }, 5000) 
     $('#btnclick').click(function() { 
      $('#testdiv').show(); 
      setTimeout(function() { 
       $("").slideToggle(1500); 
      }, 5000) 
     }) 
    }) 
})

来源

2015-05-26 Amber Sabre

有一种潮流了按钮小提琴:) –

基本上如果u使用回拨功能，那么你的代码是正确的 –

非常感谢您的帮助！它的工作现在完美了！：d –

这个怎么样？

我的例子包括向上和向下滑动，我不确定这是否可以接受，但它确实有效。

$(document).ready(function() { 
$(function() { 
    setTimeout(function() { $("#testdiv").slideToggle(1500); }, 5000) 
    $('#btnclick').click(function() { 
     $("#testdiv").slideToggle(1500); 
    }) 
})

}）

来源

2015-05-26 08:08:04 Mothermole1

试试这个：

http://jsfiddle.net/65bhj6th/5/

$(document).ready(function() { 
     $(function() { 
     setTimeout(function() { $("#testdiv").slideToggle(1500); }, 5000) 
     $('#btnclick').click(function() { 
     $('#testdiv').slideToggle(1500); 
     setTimeout(function() { $("").slideToggle(1500); }, 5000) 
     }) 
    }) 
    })

来源

2015-05-26 08:06:36 Ajai

当您使用.slideToggle()再次用它代替.show()

setTimeout(function() { 
    $("#testdiv").slideToggle(1500); 
}, 5000) 

$('#btnclick').click(function() { 
    $('#testdiv').slideToggle(); 
});

DEMO

来源

2015-05-26 08:07:32 Satpal

$(document).ready(function() { 
    $(function() { 
    setTimeout(function() { 
    $("#testdiv").slideToggle(1500); }, 5000) 
    $('#btnclick').click(function() { 
    $('#testdiv').slideToggle(1500); 
    }) 
}) 
})

来源

2015-05-26 08:08:32

只需添加这jQuery代码DEMO

$('#btnclick').click(function() { 
$('#testdiv').slideToggle("slow"); 
});

来源

2015-05-26 08:16:50 sheshadri

如何使对象再次点击时再次最小化

回答

相关问题