I have this jQuery:
$(document).ready(function()
{
$("#panel").hide();
$('.login').toggle(
function()
{
$('#panel').animate({
height: "150",
padding:"20px 0",
backgroundColor:'#000000',
opacity:.8
}, 500);
},
function()
{
$('#panel').animate({
height: "0",
padding:"0px 0",
opacity:.2
}, 500);
});
});
This is working fine, but I need to extend the functionality a little. I want to also similarly manipulate another div's properties in sync with the #panel div. I tried adding two more functions relating to the secondary div, but I just got a 4-phase toggle...haha! Forgive my ignorance!
Thanks guys!
$('.login').toggle(
function(){
$('#panel').animate({
height: "150",
padding:"20px 0",
backgroundColor:'#000000',
opacity:.8
}, 500);
$('#otherdiv').animate({
//otherdiv properties here
}, 500);
},
function(){
$('#panel').animate({
height: "0",
padding:"0px 0",
opacity:.2
}, 500);
$('#otherdiv').animate({
//otherdiv properties here
}, 500);
});
I dont think adding dual functions inside the toggle function works for a registered click event (Unless I'm missing something)
For example:
$('.btnName').click(function() {
top.$('#panel').toggle(function() {
$(this).animate({
// style change
}, 500);
},
function() {
$(this).animate({
// style change back
}, 500);
});
onmouseover="$('.play-detail').stop().animate({'height': '84px'},'300');"
onmouseout="$('.play-detail').stop().animate({'height': '44px'},'300');"
Just put two stops -- one onmouseover and one onmouseout.
Source: Stackoverflow.com