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

时间：2012-03-20 18:47:25

标签： jquery html slidedown

我是所有编码的新手，包括jquery。我虽然这很容易，但事实证明我不能这样做！我有一个按钮让div向下滑动，但我希望另一个div在同一个按钮悬停时也能在顶部向下滑动。

这里的网站我正在处理 - 当你将鼠标悬停在时间轴上时 - 一个盒子较暗的盒子向下滑动，但是我想要一个包含文本的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>

1 个答案:

答案 0 :(得分：1)

您只需要在mousein和mouseout上组合您想要的不同操作。我还结合了两个.fadeout（）函数，因为你对两个目标做了完全相同的事情。我刚刚为他们选择并应用了这个动作。

$(document).ready(function(){

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

  return false;

});
相关问题
最新问题