Форум

saxap · #1 (**permalink**) 21.03.2013, 13:22

Всем доброго времени суток, эксперты!
Использую .toggle("slow") на щелчке по кнопке для скрытия/выползания абсолютно позиционированного дива и заметил, что если задать его разположение через left:;,то анимация начинается с левого верхнего угла и проходит как-бы по диагонале в правый нижний угол, если через right:;, то наоборот.
Объясните, если не трудно, как css-правила влияют на этот эффект и что делать, если надо чтобы див, например, просто сворачивался и разворачивался как при slideDown и slideUp, ведь где не посмотрю - так во всех примерах и работает.

tsigel · #2 (**permalink**) 21.03.2013, 14:03

напишите тестовый пример

saxap · #3 (**permalink**) 21.03.2013, 15:05

jQuery(function(){
jQuery("span.opnd").click(function () {
jQuery("li.opndli").toggle("slow");
 });
});

<span class="opnd">Войти через...</span>
<ul>
<li class="opndli" style="display: none;">
тут содержимое
</li>
</ul>

ul {
margin-left: 20px;
padding: 0px;
display: inline;
list-style: none outside none;
margin: 0px 0px 0px 0px;
padding: 0px;
position: relative;
}
ul li.opndli {
background-color: #FFFFFF;
border-left: medium none currentColor;
border-radius: 5px;
display: none;
float: left;
font-weight: 400;
height: 180px;
left: -766px;
margin: 0px;
padding: 0px 5px;
position: absolute;
text-transform: capitalize;
top: 22px;
width: 360px;
z-index: 99;
}

tsigel · #4 (**permalink**) 21.03.2013, 16:10

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style>
ul {
  margin-left: 20px;
  padding: 0px;
  display: inline;
  list-style: none outside none;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  position: relative;
}
  ul li.opndli {
  background-color: #FFFFFF;
  border-left: medium none currentColor;
  border-radius: 5px;
  display: none;
  float: left;
  font-weight: 400;
  height: 180px;
  left: 0px;
  margin: 0px;
  padding: 0px 5px;
  position: absolute;
  text-transform: capitalize;
  top: 22px;
  width: 360px;
  z-index: 99;
}
</style>
<span class="opnd">Войти через...</span>
  <ul>
    <li class="opndli" style="display: none;">
      тут содержимое
    </li>
  </ul>
</span>
<script>
jQuery(function(){
  jQuery("span.opnd").click(function () {
    jQuery("li.opndli").toggle("slow");
  });
});
</script>

Тестовый пример делается примерно так. Он должен наглядно отображать суть проблемы и его должно быть можно запустить.

Раскрасьте пример чтобы был виден эффект о котором вы говорите.

И ещё все эффекты типа slide, toggle и т.д. лучше применять к <div>

saxap · #5 (**permalink**) 22.03.2013, 10:25

Вот рабочий пример:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style>
ul {
  margin-left: 20px;
  padding: 0px;
  display: inline;
  list-style: none outside none;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  position: relative;
}
  ul li.opndli {
  background-color: #000;
  border-left: medium none currentColor;
  border-radius: 5px;
  display: none;
  float: left;
  font-weight: 400;
  height: 180px;
  left: 0px;
  margin: 0px;
  padding: 0px 5px;
  position: absolute;
  text-transform: capitalize;
  top: 22px;
  width: 360px;
  z-index: 99;
}
</style>
</head>
<body>
<span class="opnd">Войти через...</span>
  <ul>
    <li class="opndli" style="display: none;">
      тут содержимое
    </li>
  </ul>
</body>
<script>
jQuery(function(){
  jQuery("span.opnd").click(function () {
    jQuery("li.opndli").toggle("slow");
  });
});
</script>
</html>

меняем у ul li.opndli left:; на right:; и анимация тоже меняется..

tsigel · #6 (**permalink**) 22.03.2013, 11:29

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style>
div.opndli {
  background-color: #000;
  border-left: medium none currentColor;
  border-radius: 5px;
  display: none;
  float: left;
  font-weight: 400;
  height: 180px;
  right: 0px;
  margin: 0px;
  padding: 0px 5px;
  position: absolute;
  text-transform: capitalize;
//  top: 22px;
  width: 360px;
  z-index: 99;
}
</style>
</head>
<body>
<span class="opnd">Войти через...</span>
  <div class="opndli" style="display: none;">
      тут содержимое
    </div>
</body>
<script>
jQuery(function(){
  jQuery("span.opnd").click(function () {
    jQuery(".opndli").slideToggle("slow");
  });
});
</script>
</html>

В документации метода "toggle" ясно написано что он использует методы 'show' и 'hide' jQuery. Если посмотреть примеры работ этих методов на оф. сайте, то можно увидеть тот эффект, о котором вы говорите.

Если вы хотите чтобы изображение выезжало сверху вниз используйте 'slideToggle' или напишите свою анимацию, какую вам угодно с помощью 'animate'.

saxap · #7 (**permalink**) 22.03.2013, 11:42

хм, странно, в прошлый раз пробовал slideToggle - эффект не изменился, а сейчас все заработало.
В любом случае спасибо!

AbMax · #8 (**permalink**) 14.08.2016, 20:22

Если ещё нужно, для сворачивания блока без смещения, его надо поместить в теги <center></center>. Тогда всё будет работать корректно.

warren buffet · #9 (**permalink**) 15.08.2016, 13:12

Чупакабра гугля: This tag has been deprecated in HTML 4 (and XHTML 1) in favor of the CSS text-align property, which can be applied to the <div> element or to an individual <p>

Форум

Справочник

Discord чат

Курсы javascript