jQuery - slideDown/slideUp从一个按钮两个单独的Div？

我对包括jquery在内的所有代码都很新颖。我虽然这会很容易，但事实证明我不能这样做！我有一个按钮可以让div向下滑动，但是当同一个按钮悬停时，我希望另一个div也在顶部滑动。jQuery - slideDown/slideUp从一个按钮两个单独的Div？

这里导通工作的网站进出口当你将鼠标悬停在timeline-一箱箱较深的向下滑动，但我想包含文本的div来也同时下滑了...

http://beelinetest.site50.net/events_programme.html

继承人jquery： - 我想把这两个代码放在一起，因为两者似乎都不起作用 - 只是盒子滑落了。

$(document).ready(function(){ 
    $('#ninethirtycircleTHURSDAY').hoverIntent(
    function() { 
    $("#appearingthursdaybox").slideDown(500); 
    }, 
    function() { 
    $("#appearingthursdaybox").fadeOut(500); 
    }); 

    return false; 

    }); 





$(document).ready(function(){ 
    $('#ninethirtycircleTHURSDAY').hoverIntent(
    function() { 
    $("#ninethirtyappearinginfoTHURSDAY").fadeIn(500); 
    }, 
    function() { 
    $("#ninethirtyappearinginfoTHURSDAY").fadeOut(500); 
    }); 

    return false; 

    });

感谢提前:)

我的继承人全部代码： -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 

<link rel="stylesheet" type="text/css" href="stylesheet.css" 
/> 

<script src="jquery-1.7.1.min.js" type="text/javascript"></script> 

<script src="jquery_script.js" type="text/javascript"></script> 

<script src="jquery.hoverIntent.minified.js" type="text/javascript"></script> 

<script src="jquery.jrumble.1.3.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 


    $(document).ready(function(){ 
     $('#featurecontainer a img').animate({ 
      opacity:.8 
     }); 
     $('#featurecontainer a img').hover(function(){ 
      $(this).stop().animate({opacity:1}, 'fast'); 
     }, function(){ 
      $(this).stop().animate({opacity:.8}, 'slow'); 
     }); 

    }); 



     $(document).ready(function(){ 
      $('#middlefeature img').jrumble({ 
     x: 1, 
     y: 1, 
     rotation: 0.1, 
     speed:10 
     }); 
     $('#needtoknowmore img').hoverIntent(function(){ 
      $('#middlefeature img').trigger('startRumble'); 
     }, function(){ 
      $('#middlefeature img').trigger('stopRumble'); 

     }); 

    }); 



     $(document).ready(function(){ 
     $('.yellowcircle').animate({ 
      opacity:0 
     }); 
     $('.yellowcircle').hover(function(){ 
      $(this).stop().animate({opacity:1}, 500); 
     }, function(){ 
      $(this).stop().animate({opacity:0}, 500); 
     }); 

    }); 






    $(document).ready(function(){ 

    $('#ninethirtycircleTHURSDAY').hoverIntent(
    function() { 
    $("#appearingthursdaybox").slideDown(500); 
    $("#ninethirtyappearinginfoTHURSDAY").fadeIn(500); 
    }, 
    function() { 
    $("#appearingthursdaybox, #ninethirtyappearinginfoTHURSDAY").fadeOut(500); 
    }); 

    return false; 

}); 


    $(document).ready(function(){ 
    $('#ninefortyfivecircleTHURSDAY').hoverIntent(
    function() { 
    $("#appearingthursdaybox").slideDown(500); 
    }, 
    function() { 
    $("#appearingthursdaybox").fadeOut(500); 
    }); 
    return false; 
    }); 



    $(document).ready(function(){ 
    $('#tencircleTHURSDAY').hoverIntent(
    function() { 
    $("#appearingthursdaybox").slideDown(500); 
    }, 
    function() { 
    $("#appearingthursdaybox").fadeOut(500); 
    }); 
    return false; 
    }); 



    $(document).ready(function(){ 
    $('#elevenfifthteencircleTHURSDAY').hoverIntent(
    function() { 
    $("#appearingthursdaybox").slideDown(500); 
    }, 
    function() { 
    $("#appearingthursdaybox").fadeOut(500); 
    }); 
    return false; 
    }); 



    $(document).ready(function(){ 
    $('#eleventhirtycircleTHURSDAY').hoverIntent(
    function() { 
    $("#appearingthursdaybox").slideDown(500); 
    }, 
    function() { 
    $("#appearingthursdaybox").fadeOut(500); 
    }); 
    return false; 
    }); 



    $(document).ready(function(){ 
    $('#twelvecircleTHURSDAY').hoverIntent(
    function() { 
    $("#appearingthursdaybox").slideDown(500); 
    }, 
    function() { 
    $("#appearingthursdaybox").fadeOut(500); 
    }); 
    return false; 
    }); 


    $(document).ready(function(){ 
    $('#onefifthteencircleTHURSDAY').hoverIntent(
    function() { 
    $("#appearingthursdaybox").slideDown(500); 
    }, 
    function() { 
    $("#appearingthursdaybox").fadeOut(500); 
    }); 
    return false; 
    }); 





































    $(document).ready(function(){ 
    $('#ninethirtycircleFRIDAY').hoverIntent(
    function() { 
    $("#appearingfridaybox").slideDown(500); 
    }, 
    function() { 
    $("#appearingfridaybox").fadeOut(500); 
    }); 
    return false; 
    }); 



    $(document).ready(function(){ 
    $('#ninefortyfivecircleFRIDAY').hoverIntent(
    function() { 
    $("#appearingfridaybox").slideDown(500); 
    }, 
    function() { 
    $("#appearingfridaybox").fadeOut(500); 
    }); 
    return false; 
    }); 



    $(document).ready(function(){ 
    $('#tencircleFRIDAY').hoverIntent(
    function() { 
    $("#appearingfridaybox").slideDown(500); 
    }, 
    function() { 
    $("#appearingfridaybox").fadeOut(500); 
    }); 
    return false; 
    }); 



    $(document).ready(function(){ 
    $('#elevenfifthteencircleFRIDAY').hoverIntent(
    function() { 
    $("#appearingfridaybox").slideDown(500); 
    }, 
    function() { 
    $("#appearingfridaybox").fadeOut(500); 
    }); 
    return false; 
    }); 



    $(document).ready(function(){ 
    $('#eleventhirtycircleFRIDAY').hoverIntent(
    function() { 
    $("#appearingfridaybox").slideDown(500); 
    }, 
    function() { 
    $("#appearingfridaybox").fadeOut(500); 
    }); 
    return false; 
    }); 



    $(document).ready(function(){ 
    $('#twelvecircleFRIDAY').hoverIntent(
    function() { 
    $("#appearingfridaybox").slideDown(500); 
    }, 
    function() { 
    $("#appearingfridaybox").fadeOut(500); 
    }); 
    return false; 
    }); 


    $(document).ready(function(){ 
    $('#onefifthteencircleFRIDAY').hoverIntent(
    function() { 
    $("#appearingfridaybox").slideDown(500); 
    }, 
    function() { 
    $("#appearingfridaybox").fadeOut(500); 
    }); 
    return false; 
    }); 









</script> 




<style type="text/css"> 


#eventsprogrammeunderline { 
    position:absolute; 
    left:445px; 
    top:57px; 
    width:124px; 
    height:2px; 
    z-index:29; 
} 

#thursdaytimeline { 
    position:absolute; 
    left:0px; 
    top:124px; 
    width:711px; 
    height:238px; 
    -moz-box-shadow: 0px 0px 5px #000; 
    -webkit-box-shadow: 0px 0px 5px #000; 
    box-shadow: 0px 0px 5px #000; 
    background-image:url(images/eventsprogrammepage/thursday.jpg); 
    z-index:29; 
} 
#fridaytimeline { 
    position:absolute; 
    left:0px; 
    top:377px; 
    width:711px; 
    height:238px; 
    background-color:#FFF; 
    -moz-box-shadow: 0px 0px 5px #000; 
    -webkit-box-shadow: 0px 0px 5px #000; 
    box-shadow: 0px 0px 5px #000; 
    background-image:url(images/eventsprogrammepage/friday.jpg); 
    z-index:29; 
} 


#maincontentbox { 
    position:absolute; 
    left:0px; 
    top:0px; 
    width:293px; 
    height:109px; 
    border-style:solid; 
    border-width:1px; 
    border-color:#323232; 
    -moz-box-shadow: 0px 0px 5px #000; 
    -webkit-box-shadow: 0px 0px 5px #000; 
    box-shadow: 0px 0px 5px #000; 
    z-index:29; 
} 
#maintext { 
    position:absolute; 
    left:13px; 
    top:8px; 
    width:265px; 
    height:117px; 
    font-size:14px; 
    font-family:Arial, Helvetica, sans-serif; 
    padding-right:3px; 
    color:#323232; 
    line-height:150%; 
    z-index:29; 
} 

#thursdaytimelinegraphic { 
    position:absolute; 
    left:69px; 
    top:32px; 
    width:586px; 
    height:191px; 
    background-image:url(images/eventsprogrammepage/timeline_graphic.png); 
    z-index:29; 
} 
#fridaytimelinegraphic { 
    position:absolute; 
    left:69px; 
    top:32px; 
    width:586px; 
    height:191px; 
    background-image:url(images/eventsprogrammepage/timeline_graphic.png); 
    z-index:29; 
} 


#ninethirtycircleTHURSDAY { 
    position:absolute; 
    left:98px; 
    top:147px; 
    width:26px; 
    height:26px; 
    z-index:99; 
} 

#ninefortyfivecircleTHURSDAY { 
    position:absolute; 
    left:193px; 
    top:118px; 
    width:26px; 
    height:26px; 
    z-index:99; 
} 


#tencircleTHURSDAY { 
    position:absolute; 
    left:278px; 
    top:158px; 
    width:26px; 
    height:26px; 
    z-index:99; 
} 

#elevenfifthteencircleTHURSDAY { 
    position:absolute; 
    left:324px; 
    top:69px; 
    width:26px; 
    height:26px; 
    z-index:99; 
} 

#eleventhirtycircleTHURSDAY { 
    position:absolute; 
    left:415px; 
    top:113px; 
    width:26px; 
    height:26px; 
    z-index:99; 
} 

#twelvecircleTHURSDAY { 
    position:absolute; 
    left:512px; 
    top:113px; 
    width:26px; 
    height:26px; 
    z-index:99; 
} 

#onefifthteencircleTHURSDAY { 
    position:absolute; 
    left:601px; 
    top:155px; 
    width:26px; 
    height:26px; 
    z-index:99; 
} 








#ninethirtycircleFRIDAY { 
    position:absolute; 
    left:98px; 
    top:147px; 
    width:26px; 
    height:26px; 
    z-index:99; 
} 

#ninefortyfivecircleFRIDAY { 
    position:absolute; 
    left:193px; 
    top:118px; 
    width:26px; 
    height:26px; 
    z-index:99; 
} 


#tencircleFRIDAY { 
    position:absolute; 
    left:278px; 
    top:158px; 
    width:26px; 
    height:26px; 
    z-index:99; 
} 

#elevenfifthteencircleFRIDAY { 
    position:absolute; 
    left:324px; 
    top:69px; 
    width:26px; 
    height:26px; 
    z-index:99; 
} 

#eleventhirtycircleFRIDAY { 
    position:absolute; 
    left:415px; 
    top:113px; 
    width:26px; 
    height:26px; 
    z-index:99; 
} 

#twelvecircleFRIDAY { 
    position:absolute; 
    left:512px; 
    top:113px; 
    width:26px; 
    height:26px; 
    z-index:99; 
} 

#onefifthteencircleFRIDAY { 
    position:absolute; 
    left:601px; 
    top:155px; 
    width:26px; 
    height:26px; 
    z-index:99; 
} 












#instructionbox { 
    position:absolute; 
    left:294px; 
    top:0px; 
    width:417px; 
    height:109px; 
    background-image:url(images/eventsprogrammepage/hover_instruction.png); 
    z-index:29; 
} 
#needtoknowmore { 
    position:absolute; 
    left:301px; 
    top:65px; 
    width:226px; 
    height:25px; 
    z-index:100; 
} 

#appearingthursdaybox { 
    position:absolute; 
    display:none; 
    left:0px; 
    top:377px; 
    width:711px; 
    height:238px; 
    z-index:200; 
} 

#appearingfridaybox { 
    position:absolute; 
    display:none; 
    left:0px; 
    top:124px; 
    width:711px; 
    height:238px; 
    z-index:200; 
} 









#ninethirtyappearinginfoTHURSDAY { 
    position:absolute; 
    display:none; 
    left:16px; 
    top:17px; 
    width:678px; 
    height:203px; 
    font-size:18px; 
    font-family:Arial, Helvetica, sans-serif; 
    color:#FFF; 
    line-height:150%; 
    z-index:300; 
} 



</style> 


</head> 

<body> 


<div id="container"> 


<div id="navbarcontainer"> 

     <div id="btnhome"><a href="index.html"><img src="images/home.png" width="37" height="10" border="0" alt="home" /></a></div> 

     <div id="btnaboutthefestival"><a href="about_the_festival.html"><img src="images/about_the_festival.png" width="120" height="10" border="0" alt="about the festival" /></a></div> 

     <div id="btnfestivalfun"><a href="festival_fun.html"><img src="images/festivsl_fun.png" width="74" height="10" border="0" alt="festival fun" /></a></div> 

     <div id="btneventsprogramme"><a href="events_programme.html"><img src="images/events_programme_.png" width="125" height="10" border="0" alt="events programme" /></a></div> 

     <div id="btnaboutuw"><a href="about_uw.html"><img src="images/about_uw.png" width="63" height="10" border="0" alt="about uw" /></a></div> 

     <div id="btnartsandculture"><a href="the_arts_and_culture_in_worcester.html"><img src="images/the_arts_and_culture_in_worcester.png" width="223" height="10" border="0" alt="the arts and culture in worcester" /></a></div> 

     <div id="btnblog"><a href="#"><img src="images/blog.png" width="33" height="10" border="0" alt="blog" /></a></div> 

     <div id="btncontact"><a href="contact.html"><img src="images/contact.png" width="58" height="10" border="0" alt="contact" /></a></div> 


    </div><!--navbarcontainer--> 


    <div id="featurecontainer"> 

     <div id="topfeature"><a href="about_uw.html"><img src="images/about_uw_feature.jpg" width="268" height="195" border="0" alt="about uw feature" /></a></div> 

     <div id="middlefeature"><a href="contact.html"><img src="images/contact_us_feature.jpg" width="268" height="195" border="0" alt="contact us feature" /></a></div> 

     <div id="bottomfeature"><a href="festival_fun.html"><img src="images/festival_fun_feature.jpg" width="268" height="195" border="0" alt="festival fun feature" /></a></div> 

    <div id="opacitycover"><img src="images/opacity_cover.jpg" width="268" height="195" border="0" alt="opacity cover" /></div> 


    </div><!--featurecontainer--> 


    <div id="navbar"></div> 

    <div id="eventsprogrammeunderline"><img src="images/events_programme_underline.png" width="124" height="2" alt="underline" /></div> 

    <div id="logo"><a href="index.html"><img src="images/logo.png" alt="beeline logo" width="147" height="62" border="0" /></a></div> 

    <div id="seperatorone"><img src="images/seperator.png" width="2" height="22" alt="seperator" /></div> 

    <div id="seperatortwo"><img src="images/seperator.png" alt="seperator" width="2" height="22" border="0" /></div> 

    <div id="seperatorthree"><img src="images/seperator.png" alt="seperator" width="2" height="22" border="0" /></div> 

    <div id="seperatorfour"><img src="images/seperator.png" alt="seperator" width="2" height="22" border="0" /></div> 

    <div id="seperatorfive"><img src="images/seperator.png" alt="seperator" width="2" height="22" border="0" /></div> 

    <div id="seperatorsix"><img src="images/seperator.png" alt="seperator" width="2" height="22" border="0" /></div> 

    <div id="seperatorseven"><img src="images/seperator.png" width="2" height="22" alt="seperator" /></div> 




    <div id="maincontentcontainer"> 


     <div id="instructionbox"></div> 

     <div id="needtoknowmore"><a href="#"><img src="images/eventsprogrammepage/need_to_know_more.png" alt="need to know more" width="226" height="25" border="0" /></a></div> 

     <div id="maincontentbox"> 

     <div id="maintext">Only 9:45AM, 11:15AM AND 11:30AM are working at the moment. This is just to show the effect I am looking for. Donec sit amet turpis sit.</div> 


    </div><!--maincontentbox--> 





     <div id="thursdaytimeline"> 



     <div id="thursdaytimelinegraphic"></div> 



     <div id="ninethirtycircleTHURSDAY" class="yellowcircle"><a href="#"><img src="images/eventsprogrammepage/hover_circle.png" width="26" height="26" alt="highlighted circle" /></a></div> 


     <div id="ninefortyfivecircleTHURSDAY" class="yellowcircle"><a href="#"><img src="images/eventsprogrammepage/hover_circle.png" width="26" height="26" alt="highlighted circle" /></a></div> 


     <div id="tencircleTHURSDAY" class="yellowcircle"><a href="#"><img src="images/eventsprogrammepage/hover_circle.png" width="26" height="26" alt="highlighted circle" /></a></div> 


     <div id="elevenfifthteencircleTHURSDAY" class="yellowcircle"><a href="#"><img src="images/eventsprogrammepage/hover_circle.png" width="26" height="26" alt="highlighted circle" /></a></div>  


     <div id="eleventhirtycircleTHURSDAY" class="yellowcircle"><a href="#"><img src="images/eventsprogrammepage/hover_circle.png" width="26" height="26" alt="highlighted circle" /></a></div> 


     <div id="twelvecircleTHURSDAY" class="yellowcircle"><a href="#"><img src="images/eventsprogrammepage/hover_circle.png" width="26" height="26" alt="highlighted circle" /></a></div> 


     <div id="onefifthteencircleTHURSDAY" class="yellowcircle"><a href="#"><img src="images/eventsprogrammepage/hover_circle.png" width="26" height="26" alt="highlighted circle" /></a></div> 















     </div><!--thursdaytimeline--> 









     <div id="appearingthursdaybox"><img src="images/eventsprogrammepage/appearing_timeline_box.jpg" width="711" height="238" alt="appearing box" /> 
     </div><!--appearingthursdaybox--> 




     <div id="appearingfridaybox"><img src="images/eventsprogrammepage/appearing_timeline_box.jpg" width="711" height="238" alt="appearing box" /> 
     </div><!--appearingthursdaybox--> 











     <div id="fridaytimeline"> 



     <div id="fridaytimelinegraphic"></div> 





     <div id="ninethirtycircleFRIDAY" class="yellowcircle"><a href="#"><img src="images/eventsprogrammepage/hover_circle.png" width="26" height="26" alt="highlighted circle" /></a></div> 


     <div id="ninefortyfivecircleFRIDAY" class="yellowcircle"><a href="#"><img src="images/eventsprogrammepage/hover_circle.png" width="26" height="26" alt="highlighted circle" /></a></div> 


     <div id="tencircleFRIDAY" class="yellowcircle"><a href="#"><img src="images/eventsprogrammepage/hover_circle.png" width="26" height="26" alt="highlighted circle" /></a></div> 


     <div id="elevenfifthteencircleFRIDAY" class="yellowcircle"><a href="#"><img src="images/eventsprogrammepage/hover_circle.png" width="26" height="26" alt="highlighted circle" /></a></div>  


     <div id="eleventhirtycircleFRIDAY" class="yellowcircle"><a href="#"><img src="images/eventsprogrammepage/hover_circle.png" width="26" height="26" alt="highlighted circle" /></a></div> 


     <div id="twelvecircleFRIDAY" class="yellowcircle"><a href="#"><img src="images/eventsprogrammepage/hover_circle.png" width="26" height="26" alt="highlighted circle" /></a></div> 


     <div id="onefifthteencircleFRIDAY" class="yellowcircle"><a href="#"><img src="images/eventsprogrammepage/hover_circle.png" width="26" height="26" alt="highlighted circle" /></a></div> 





     <div id="ninethirtyappearinginfoTHURSDAY"> INFO DISPLAYED HERE!</div> 







     </div><!--fridaytimeline--> 













    </div><!--maincontentcontainer--> 









</div><!--container--> 





<div id="header"></div> 


<div id="footercontainer"></div> 











</body> 


</html>

来源

2012-03-20 user1281720

顺便说一下，您的网站设计很好地完成。我猜你有一个设计背景。 – 2012-03-20 18:54:20

感谢大学二年级的学生，但在此之前一无所获。我目前在我的第一个互联网模块 - 所以我甚至没有听说过Dreamweaver，更不用说在3个月前使用它！希望做更多，虽然我真的很享受它:)再次感谢您的帮助和友好的话 - 意味着很多伙伴 – user1281720 2012-03-20 19:34:09

我的荣幸，很高兴我帮了一些。到底什么是问题？仅供参考，您只需要一个jQuery就绪块 - 每个.hoverIntent（）事件都可以存在于* one * ready函数中。另外，如果他们都做同样的事情，你可以让一个选择器把它们全部拿起来，并针对它们运行一个.hoverIntent（）函数。 – 2012-03-20 19:45:39

你只需要你想在mousein及移出不同的行动结合起来。我还将两个.fadeout（）函数结合起来，因为您对两个目标都做了完全相同的事情。我只是为他们选择并应用了这个动作。

$(document).ready(function(){ 

    $('#ninethirtycircleTHURSDAY').hoverIntent(
    function() { 
    $("#appearingthursdaybox").slideDown(500); 
    $("#ninethirtyappearinginfoTHURSDAY").fadeIn(500); 
    }, 
    function() { 
    $("#appearingthursdaybox, #ninethirtyappearinginfoTHURSDAY").fadeOut(500); 
    }); 

    return false; 

});

来源

2012-03-20 18:49:38

感谢您的快速回复！只是试过了，但信息没有显示在上面 - 你只能看到它，因为星期四的盒子会消失？而且信息的z索引更高.... – user1281720 2012-03-20 18:57:26

扫描你的页面的代码，没有元素的id为#ninethirtyappearinginfoTHURSDAY - 所以什么都不会出现。你是否提供了一个你想要的ID，或者可以省略#ninethirtyappearinginfoTHURSDAY的代码？ – 2012-03-20 19:03:40

对不起，它没有更新的interent，即时通讯在本地工作...现在我上传它，给我2分钟 – user1281720 2012-03-20 19:05:50

jQuery - slideDown/slideUp从一个按钮两个单独的Div？

回答

相关问题