Блог

Главная - Вопросы по программированию - Расширение / сжатие Div с помощью jQuery и CSS

Расширение / сжатие Div с помощью jQuery и CSS

#jquery #css #html #expand

#jquery #css #HTML #Развернуть

Вопрос:

Я пытаюсь использовать jQuery и CSS, чтобы позволить пользователям перемещаться по «стене» с изображениями разного размера.

В принципе, когда пользователь наводит курсор мыши на изображение, я хочу, чтобы оно расширялось (что в данный момент работает), и я хотел бы, чтобы div также увеличивался в ширину, чтобы показать некоторую дополнительную информацию. По какой-то причине, когда я наводлю курсор на эту точку, происходит какое-то действительно странное поведение, а при наведении курсора мыши изображение полностью закрывается. У меня такое чувство, что мне где-то не хватает «остановки», но я не могу понять, где. Может кто-нибудь взглянуть?

jQuery:

 jQuery(function($){
                $('.bar').mosaic({
                    animation   :   'slide'
                });
            });

HTML:

 <div class="MBT-CSS3">
        <!--Bar-->
        <div class="mosaic-block bar">
            <a href="http://buildinternet.com/project/mosaic" target="_blank" class="mosaic-overlay">

                    <h4>This video is really cool!  Click to watch more!</h4>
                    <p>by Media Innovation Team</p>

            </a>


            <!-- <img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/mosaic.jpg"/> -->
            <img src="img/grad1.png"/>

        </div>
  </div>

        <div class="clearfix"></div>

CSS

 .MBT-CSS3 div{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
/*opacity: 0.5;
z-index: 1;*/
position:relative;
overflow:hidden;
background-color:#000;
width: auto;
height: auto;
/*margin: 0 10px 5px 0; */
}
.MBT-CSS3 div:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
/*box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray; */
opacity: 1;
z-index: 100;
width:600px;
/*height:250px; */  
}

Спасибо всем, кто мог бы помочь!!!! Я действительно ценю ваше время!

Комментарии:

1. Вы используете плагин jQuery? Возможно, вы захотите упомянуть это в своем вопросе. Кроме того, публикация примера JSFiddle может оказать вам дополнительную помощь.

2. Вау, это действительно круто… Я поместил его в jsfiddle, чтобы поиграть с ним. jsfiddle.net/dlikhten/QqFrj/1

3. К вашему сведению, JSFiddle, опубликованный Dmitriy, не слишком хорошо работает в Safari. Мягко говоря, «Фанковый» … он прыгает повсюду.

Ответ №1:

Попробуйте это : 

                 $(document).ready(function(){
          var busy = 0;
          $('.MBT-CSS3').mouseover(function(){
              if(!busy)
                  {
                      busy = 1;                      
                    $('#img').animate({
                   '-webkit-transform':'scale(1.1)',
                    '-moz-transform':'scale(1.1)',
                    '-o-transform':'scale(1.1)',
                    'opacity': '1',
                    'z-index': '100',
                    'width' : '600'
                  }, function(){busy = 0;});
                  }
          });
          $('.MBT-CSS3').mouseout(function(){
          if(!busy)
              {
                  busy = 1;                      
                    $('#img').animate({
                   '-webkit-transform':'scale(.7)',
                    '-moz-transform':'scale(.7)',
                    '-o-transform':'scale(.7)',
                    'opacity': '0.5',
                    'z-index': '1',
                    'width' : '300'
                  }, function(){busy = 0;});
              }
          });
      });

Должно сработать.Я добавил id="img" к изображению, которое вы использовали. Надеюсь, это поможет! Вы можете добавлять / удалять / редактировать любой из атрибутов по своему усмотрению.
Также удалена вся .MBT-CSS3 :hover часть вашего CSS.
Отредактировано для всего 'MBT-CSS3' класса, извините 🙂

Ответ №2:

Ваша первая проблема заключается в :hover . Происходит то, что анимация воспроизводится, и вы больше не зависаете над элементом из-за новых размеров / положения. Таким образом, наведение снимается, и цикл повторяется.

Ответ №3:

Большое спасибо за помощь. На самом деле я заставил это работать, просто установив конкретную ширину и высоту исходного div.

Итак, в то время как у меня было:

 position:relative;
overflow:hidden;
background-color:#000;
width: auto;
height: auto;
/*margin: 0 10px 5px 0; */
}

Я изменил его на:

 position:relative;
overflow:hidden;
background-color:#000;
width: 350;
height: 250;
/*margin: 0 10px 5px 0; */
}

и это сработало великолепно. Я действительно ценю все ваше время и помощь в этом! Вы, ребята, потрясающие!