2015-06-11 4 views
0

Я новичок в jQuery и создаю гармоничное меню.Меню изменения размера аккордеона jQuery

Моя проблема заключается в том, что у меня есть меню, и я хотел бы сделать его фиксированным, поэтому я хочу, чтобы всякий раз, когда вы наводите курсор на один из элементов, он увеличивается, а другие параметры уменьшаются.

Не могу понять, как это сделать. Я пробовал установить max-width и установил width, но то, что он делает, это помещает некоторые из div ниже остальных, чтобы они все соответствовали. Я хочу, чтобы все было на одной линии, а div - на каждую усадку на определенную сумму.

Вот мой код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $('#accordion > li').hover(
       function() { 
        var $this = $(this); 
        $this.stop().animate({'width':'400px'},500); 
        $('.heading',$this).stop(true,true).fadeOut(); 
        $('.bgDescription',$this).stop(true,true).slideDown(500); 
        $('.description',$this).stop(true,true).fadeIn(); 
       }, 
       function() { 
        var $this = $(this); 

        $this.stop().animate({'width':'100px'},1000); 
        $('.heading',$this).stop(true,true).fadeIn(); 
        $('.description',$this).stop(true,true).fadeOut(500); 
        $('.bgDescription',$this).stop(true,true).slideUp(700); 
       } 
      ); 
     }); 
    </script> 
+1

, пожалуйста, добавьте html-код тоже, скрипка будет полезна для начала. Можете ли вы предоставить скрипку? –

+0

Вот скрипка: https://jsfiddle.net/bj3dpyok/ Я пытаюсь получить анимацию и поток этого http://mottie.github.io/Kwicks/#ex6, но я не знаю, как добавить его в с моим текущим проектом – TomMcmann

ответ

0

Попробуйте этот код. А на идеальный ответ для вас
Html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
     <title>Elegant Accordion with jQuery and CSS3</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
     <meta name="description" content="Elegant Accordion with jQuery and CSS3" /> 
     <meta name="keywords" content="jquery, slide out,accordion, css3, fadeout, fadein, elegant, fancy, box shadow"/> 
     <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/> 
     <style> 
      *{ 
       margin:0; 
       padding:0; 
      } 
      body{ 
       font-family:Arial; 
       background:#fff url(pattern.png) repeat top left; 
      } 
      a{ 
       color:#444; 
      } 
      a:hover{ 
       color:#999; 
      } 
      .title{ 
       width:500px; 
       height:152px; 
       position:absolute; 
       top:0px; 
       left:0px; 
       background:transparent url(title.png) no-repeat top left; 
      } 
      a.back{ 
       background:transparent url(back.png) no-repeat top left; 
       position:fixed; 
       width:150px; 
       height:27px; 
       outline:none; 
       bottom:0px; 
       left:0px; 
      } 
      #content{ 
       margin:0 auto; 
      } 
      .reference{ 
       clear:both; 
       top:300px; 
       left:0px; 
       position:absolute; 
       text-align:right; 
       width:400px; 
       padding:20px; 
       background-color:#fff; 
       -moz-box-shadow:1px 3px 15px #ddd; 
       -webkit-box-shadow:1px 3px 15px #ddd; 
       box-shadow:1px 3px 15px #ddd; 
      } 
      .reference p a{ 
       text-transform:uppercase; 
       text-shadow:1px 1px 1px #fff; 
       color:#666; 
       text-decoration:none; 
       font-size:10px; 
      } 
      .reference p a:hover{ 
       color:#333; 
      } 

     </style> 
    </head> 

    <body> 
     <div id="content"> 
      <a class="back" href="http://tympanus.net/codrops/2010/04/26/elegant-accordion-with-jquery-and-css3/"></a> 
      <div class="title"></div> 
      <div class="reference"> 
       <p><a href="http://www.freedigitalphotos.net/images/view_photog.php?photogid=901">Image 1: Michelle Meiklejohn/FreeDigitalPhotos.net</a></p> 
       <p><a href="http://www.freedigitalphotos.net/images/view_photog.php?photogid=879">Image 2: Luigi Diamanti/FreeDigitalPhotos.net</a></p> 
       <p><a href="http://www.freedigitalphotos.net/images/view_photog.php?photogid=503">Image 3: Tina Phillips/FreeDigitalPhotos.net</a></p> 
       <p><a href="http://www.freedigitalphotos.net/images/view_photog.php?photogid=1039">Image 4: Ahmet Guler/FreeDigitalPhotos.net</a></p> 
      </div> 


      <ul class="accordion" id="accordion"> 
       <li class="bg1"> 
        <div class="heading">Guler</div> 
        <div class="bgDescription"></div> 
        <div class="description"> 
         <h2>Guler</h2> 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
          ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
          reprehenderit in voluptate velit esse cillum dolore eu fugiat 
          nulla pariatur.</p> 
         <a href="#">more &rarr;</a> 
        </div> 
       </li> 
       <li class="bg2"> 
        <div class="heading">Phillips</div> 
        <div class="bgDescription"></div> 
        <div class="description"> 
         <h2>Phillips</h2> 
         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
          accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
          quae ab illo inventore veritatis et quasi architecto beatae vitae 
          dicta sunt explicabo. </p> 
         <a href="#">more &rarr;</a> 
        </div> 

       </li> 
       <li class="bg3"> 
        <div class="heading">Diamanti</div> 
        <div class="bgDescription"></div> 
        <div class="description"> 
         <h2>Diamanti</h2> 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
          ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
          reprehenderit in voluptate velit esse cillum dolore eu fugiat 
          nulla pariatur.</p> 
         <a href="#">more &rarr;</a> 
        </div> 

       </li> 
       <li class="bg4 bleft"> 
        <div class="heading">Meiklejohn</div> 
        <div class="bgDescription"></div> 
        <div class="description"> 
         <h2>Meiklejohn</h2> 
         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
          accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
          quae ab illo inventore veritatis et quasi architecto beatae vitae 
          dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
          sit aspernatur aut odit aut fugit, sed quia consequuntur magni 
          dolores eos qui ratione voluptatem sequi nesciunt.</p> 
         <a href="#">more &rarr;</a> 
        </div> 

       </li> 
      </ul> 
     </div> 

     <!-- The JavaScript --> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(function() { 
       $('#accordion > li').hover(
        function() { 
         var $this = $(this); 
         $this.stop().animate({'width':'480px'},500); 
         $('.heading',$this).stop(true,true).fadeOut(); 
         $('.bgDescription',$this).stop(true,true).slideDown(500); 
         $('.description',$this).stop(true,true).fadeIn(); 
        }, 
        function() { 
         var $this = $(this); 
         $this.stop().animate({'width':'115px'},1000); 
         $('.heading',$this).stop(true,true).fadeIn(); 
         $('.description',$this).stop(true,true).fadeOut(500); 
         $('.bgDescription',$this).stop(true,true).slideUp(700); 
        } 
       ); 
      }); 
     </script> 
    </body> 
</html> 

CSS

ul.accordion{ 
    list-style:none; 
    position:absolute; 
    right:80px; 
    top:0px; 
    font-family: Cambria, serif; 
    font-size: 16px; 
    font-style: italic; 
    line-height: 1.5em; 
} 
ul.accordion li{ 
    float:right; 
    width:115px; 
    height:480px; 
    display:block; 
    border-right:2px solid #fff; 
    border-bottom:2px solid #fff; 
    background-color:#fff; 
    background-repeat:no-repeat; 
    background-position:center center; 
    position:relative; 
    overflow:hidden; 
    cursor:pointer; 
    -moz-box-shadow:1px 3px 15px #555; 
    -webkit-box-shadow:1px 3px 15px #555; 
    box-shadow:1px 3px 15px #555; 
} 
ul.accordion li.bg1{ 
    background-image:url(../images/1.jpg); 
} 
ul.accordion li.bg2{ 
    background-image:url(../images/2.jpg); 
} 
ul.accordion li.bg3{ 
    background-image:url(../images/3.jpg); 
} 
ul.accordion li.bg4{ 
    background-image:url(../images/4.jpg); 
} 
ul.accordion li.bleft{ 
    border-left:2px solid #fff; 
} 
ul.accordion li .heading{ 
    background-color:#fff; 
    padding:10px; 
    margin-top:60px; 
    opacity:0.9; 
    text-transform:uppercase; 
    font-style:normal; 
    font-weight:bold; 
    letter-spacing:1px; 
    font-size:14px; 
    color:#444; 
    text-align:center; 
    text-shadow:-1px -1px 1px #ccc; 
} 
ul.accordion li .description{ 
    position:absolute; 
    width:480px; 
    height:175px; 
    bottom:0px; 
    left:0px; 
    display:none; 
} 
ul.accordion li .description h2{ 
    text-transform:uppercase; 
    font-style:normal; 
    font-weight:bold; 
    letter-spacing:1px; 
    font-size:45px; 
    color:#444; 
    text-align:left; 
    margin:0px 0px 15px 20px; 
    text-shadow:-1px -1px 1px #ccc; 
} 
ul.accordion li .description p{ 
    line-height:14px; 
    margin:10px 22px; 
    font-family: "Trebuchet MS", sans-serif; 
    font-size: 12px; 
    font-style: italic; 
    font-weight: normal; 
    text-transform: none; 
    letter-spacing: normal; 
    line-height: 1.6em; 
} 
ul.accordion li .description a{ 
    position:absolute; 
    bottom:5px; 
    left:20px; 
    text-transform:uppercase; 
    font-style:normal; 
    font-size:11px; 
    text-decoration:none; 
    color:#888; 
} 
ul.accordion li .description a:hover{ 
    color:#333; 
    text-decoration:underline; 
} 

ul.accordion li .bgDescription{ 
    background:transparent url(../images/bgDescription.png) repeat-x top left; 
    height:340px; 
    position:absolute; 
    bottom:0px; 
    left:0px; 
    width:100%; 
    display:none; 
} 

Выберите и поместить изображения на ваш выбор .... хорошо.

+0

он просто показывал простой html. Никакого сценария или стиля не появилось – TomMcmann

+0

ok ... позвольте мне дать вам другое решение. –

+0

Это сработало, но то, чего я пытаюсь достичь, - это сочетание между http://tympanus.net/codrops/2010/04/26/elegant-accordion-with-jquery-and-css3/ и http: // mottie. github.io/Kwicks/#ex6 – TomMcmann

Смежные вопросы