jQuery, вставленный текст

#jquery #animation

#jquery #Анимация

Вопрос:

Я новичок в jQuery. Как я могу вставить какой-нибудь текст? Я попробовал это, и 1) это не работает, и 2) Я бы предпочел, чтобы это вставлялось сбоку

 $("#someId").html("hello").slideDown('slow');

Ответ №1:

Трудно сказать, что не так, без дополнительной информации, поскольку есть несколько возможных моментов, когда что-то может пойти не так. Вот несколько возможностей:

Если элемент уже отображается, он не будет анимироваться.
Если при выборе jquery в конечном итоге не будут выбраны какие-либо элементы, вы также ничего не увидите. Есть ли элемент с идентификатором someId в вашем DOM-дереве?

Вот пример использования slideDown:

 <!DOCTYPE html>
<html lang="en">
   <head>
     <script src="jquery.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(
             function() {
                 $("#someId").hide();
                 $("#someId").html("hello").slideDown('slow');
         });
     </script>
  </head>
  <body>
      <div id="someId"></div>
  </body>
</html>

1. да, спасибо за этот пример; Я вижу, что это работает, и, более конкретно, я вижу, что синтаксис html … slidedown также работает. Я думаю, что моя ошибка заключалась в том, что я не поместил строку кода в функцию document … ready …. Любопытная вещь, однако, заключается в том, что слово «привет» вводится в html, но функция slidedown не работает. На самом деле я переделывал старый скрипт, который написал на JavaScript, где это утверждение находится внутри if / else. Я думаю, что мне нужно переместить весь if / else и, возможно, весь скрипт в document … ready …функцию.

Ответ №2:

 $("#someId").html("hello").show('slide');

Скрипка:http://jsfiddle.net/maniator/6LB8M

Ответ №3:

Проверьте функцию animate, это даст вам гораздо больше гибкости:

http://api.jquery.com/animate/

Вы захотите изменить либо поле, либо положение x / y … что-то вроде этого:

 $('#someID').html("hello").animate({
  left: ' =50',
}, 1000, function() {
  // Animation complete.
});

Это означает, что #someID будет применена анимация, в которой положение элементов по оси x будет увеличено на 50 пикселей, и это будет происходить в течение 1 секунды.

Ответ №4:

CSS:

 #someId

{
    width:100px;
    margin-left:-100px;
}

jQuery

 $('div').animate({marginLeft:"0"},1500);

Смотрите это здесь http://jsfiddle.net/v8XFn

Ответ №5:

1 — Возможно, это нужно скрыть заранее? т.е.:

 #someId { display: none }

2 — Вы можете анимировать ширину контейнера. Итак, если ваш контейнер имеет нулевую ширину, анимируйте его до 250 пикселей в ширину (или сколько угодно).

 $('#someId').animate({
    width: '250',
}, 5000, function() {
    // Animation complete.
});

http://api.jquery.com/animate/

Ответ №6:

Это может прекрасно работать.

 $(".inner").mouseover(function(){
  $(".inner").animate({"marginLeft": "-=100px"}, "slow");
});

$(".inner").mouseout(function(){
  $(".inner").animate({"marginLeft": " =100px"}, "slow");
});

Посмотреть на это в действии можно здесь: http://jsfiddle.net/R4Xyd/5

Ответ №7:

Вы можете анимировать положение. У вас должно получиться что-то вроде этого:

HTML:

 <p id="animated_text">text to be animated</p>

css:

 p {
position: abosulte;
left: 0;
}

jquery:

 $("#animated_text").animate({'left': ' =200'}, 1000);

Ответ №8:

Получите плагин для упрощения jQuery и добавьте его в свой файл

 <script src="script/jquery.easing.1.3.js" type="text/javascript"></script>
--and do this--
$('#yourDiv').delay(3000).effect('slide', { direction: "right" });