如何使對象再次點擊時再次最小化

我有一個小表單，當用戶訪問我的網頁時展開，然後在幾秒鐘後最小化。然後當按鈕被點擊時，它再次膨脹。我一直在嘗試添加代碼，以便在按鈕再次單擊時儘量減少它，但我一直在打破它。我是一個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

如何使對象再次點擊時再次最小化

回答

相關問題