Увеличение и уменьшение ширины и высоты блока в списке при наведении

ProgramBox

Увеличение и уменьшение ширины и высоты блока в списке при наведении

Post author:admin
Запись опубликована:14 марта, 2023
Post category:Вопросы по программированию

#jquery #html #css

#jquery #HTML #css

Вопрос:

У меня есть список, в котором я хочу увеличить ширину и высоту каждого блока, 0.5s пока пользователь наводит на него курсор. а затем уменьшать до размера по умолчанию после повторного наведения мыши 0.5s .

моя проблема в том, как настроить z-index отображение его перед другими блоками в моем списке при наведении курсора мыши, а затем при наведении курсора мыши настроить размер и место по умолчанию

это мой HTML-список:

 <div id="twelvetour">
<nav>
  <ul class="row">
     <li class="col-md-2">
         <div  class="twelveeffect">
             <a href="">
               <img class="img-responsive" src="" alt="" />
                <p class="text-center">LOREM IPSUM</p>
              </a>
         </div>

     </li>
     <li class="col-md-2">
        <div class="twelveeffect">
           <a href="">
            <img class="img-responsive" src="" alt="" />
            <p class="text-center">LOREM IPSUM</p>
           </a>
        </div>
    </li>
    <li class="col-md-2">
      <div class="twelveeffect">
         <a href="">
          <img class="img-responsive" src="" alt="" />
          <p class="text-center">LOREM IPSUM</p>
         </a>
      </div>                  
    </li>
 </ul>
</nav>
</div>

и это мой jquery:

  $("#twelvetour li>div.twelveeffect").hover(
 // Mouse Over
 function () {

  //problem is here
  $("#twelvetour li").css("zIndex",9 );

  $(this).animate({ width: '130%', height: 400 }, 500);
},
// Mouse Out
function () {


  $(this).animate({ width: '100%', height: 250 }, 500);


 });

как я уже упоминал, моя проблема, когда я устанавливаю z-index так, тогда она изменяет весь мой список, и снова мое переполнение зависшего блока находится позади его брата, но моя цель — иметь его впереди. и это очень важно для меня, когда блок зависает, это не влияет на другие места.

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

спасибо за любую помощь.

Ответ №1:

Попробуйте использовать:

 $(this).parent().css("zIndex",9);

вместо

 $("#twelvetour li").css("zIndex",9);

в строке 6 вашего js

1. Это немного сложнее, чем то, что у вас есть в вашем скрипте. Вам нужно будет вычислить ширину / высоту каждого элемента, а затем разместить эти абсолютные значения на странице или в контейнере. Тогда можно было бы установить z-индекс и изменить размер элементов при наведении.

2. действительно спасибо, что это решилось с помощью этого изменения и плюс это: $(this).animate({ width: ‘100%’, height: 250 }, 500, function () { $(this).parent().css(«zIndex», 8); });

Ответ №2:

Я не слишком хорошо разбираюсь в jquery, но, тем не менее, надеюсь, что мой ответ будет полезен. Я считаю, что гораздо проще создавать анимации с помощью встроенного CSS.

В приведенном ниже примере div будет увеличиваться в ширину при наведении курсора и сжиматься, когда пользователь убирает курсор с div.

Свойство «transition» сообщает браузеру анимировать любые изменения, внесенные в элемент. Итак, как только у нас это будет на месте, мы можем просто изменить свойство «width» при наведении, и оно будет хорошо анимировано для нас. Мы можем сделать то же самое с «z-index».

в качестве альтернативы вы можете использовать transform: scale(1.2, 1); для увеличения ширины элемента, не затрагивая другие элементы в списке.

 .anAwesomeDiv {
   width: 100px;
   color: white;
   height: 100px;
   background-color: blue;
   transition: 0.5s;
 }

.anAwesomeDiv:hover {
   width: 200px;
   z-index: 50;
 }

 <div class="anAwesomeDiv">
  Look how awesome this div is!
</div>

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

Ответ №3:

 $("#twelvetour li .twelveeffect").hover(
 // Mouse Over
 function (event) {

  //problem is here
 $(this).parent().css("zIndex",9);

  $(this).stop().animate({ width: '80%', height: 400 }, 500);
},
// Mouse Out
function (event) {


  $(this).stop(true,true).animate({ width: '40%', height: 50 }, 500);
  event.stopPropagation(); 
  event.preventDefault(); 

 });

 .twelveeffect {background:blue;color:white;width:30%;}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="twelvetour">
<nav>
  <ul class="row">
     <li class="col-md-2">
         <div  class="twelveeffect">
             <a href="">
               <img class="img-responsive" src="" alt="" />
                <p class="text-center">LOREM IPSUM</p>
              </a>
         </div>

     </li>
     <li class="col-md-2">
        <div class="twelveeffect">
           <a href="">
            <img class="img-responsive" src="" alt="" />
            <p class="text-center">LOREM IPSUM</p>
           </a>
        </div>
    </li>
    <li class="col-md-2">
      <div class="twelveeffect">
         <a href="">
          <img class="img-responsive" src="" alt="" />
          <p class="text-center">LOREM IPSUM</p>
         </a>
      </div>                  
    </li>
 </ul>
</nav>
</div>

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

2. @ neda Derakhshesh . то, что вам нужно. объясните четко.

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

Ответ №4:

Может быть, вы можете работать с чем-то вроде этого:

 var li 		    = $('#twelvetour li');
var liWidth 	= li.width();
var liLeft 		= 0;
var liMargin 	= 40;

li.each(function(){
  $(this).css({
    left : liLeft   'px'
  });
  liLeft = liLeft   liWidth   liMargin;
});

 a {
  text-decoration: none;
  color: #555;
  font-family: Arial, Helvetica sans-serif;
}

/*------------------------------------*/


#twelvetour {
  position: relative;
}

#twelvetour li {
  position: absolute;
  background: #e7e7e7;
  height: 50px;
  overflow: hidden;
  width: 100px;
  overflow: hidden;
  transition: all 200ms ease;
  padding: 15px;
}

#twelvetour li p {
  margin: 0;
}

.twelveeffect {
  
}

#twelvetour li:hover {
  z-index: 3;
  padding: 30px;
  background: #1755ff;
  transform: translate(-15px);
  height: 300px;
  
}

#twelvetour li:hover a {
  color: white;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="twelvetour">
  <nav>
    <ul class="row">
       <li class="col-md-2">
           <div  class="twelveeffect">
               <a href="">
                 <img class="img-responsive" src="" alt="" />
                  <p class="text-center">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                </a>
           </div>

       </li>
       <li class="col-md-2">
          <div class="twelveeffect">
             <a href="">
              <img class="img-responsive" src="" alt="" />
              <p class="text-center">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
             </a>
          </div>
      </li>
      <li class="col-md-2">
        <div class="twelveeffect">
           <a href="">
            <img class="img-responsive" src="" alt="" />
            <p class="text-center">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
           </a>
        </div>                  
      </li>
   </ul>
  </nav>
</div>

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