Спонсор поста: Круглые светильники из хрусталя.

Оригинал.

Пример.

Это очень легко! Давайте сделаем html пример.

<p>
 This is some text. This is some text. This is some text. This is some text. This
 is some text. This is some text. This is some text. This is some text. This is some
 text. This is some text. This is some text. <span class="readMore">Read More</span>
</p>
<p>
 This is some text. This is some text. This is some text. This is some text. This
 is some text. This is some text. This is some text. This is some text. This is some
 text. This is some text. This is some text. This is some text. This is some text.
</p>

Это только некоторый текст с двумя параграфами. Мы также имеем span с классом “readMore”. Когда по span кликнули, мы должны его убрать.

$(document).ready(function()
 {
  $('p:eq(1)').hide();
  $('span.readMore').css({"cursor" : "pointer", "color" : "blue", "font-size" : ".8em"}).click(function()
 {
  $('p:eq(1)').fadeIn("slow");
  $(this).fadeOut("normal");
});
});

$(document).ready(function()
{
$(‘p:eq(1)’).hide();
$(‘span.readMore’).css({“cursor” : “pointer”, “color” : “blue”, “font-size” : “.8em”}).click(function()
{
$(‘p:eq(1)’).fadeIn(“slow”);
$(this).fadeOut(“normal”);
});
});

Здесь мы собираемся спрятать второй параграф (p:eq(1)). Помните, что javascript использует 0 как первое число. Соответсвенно “1” будет эквивалентно второму параграфу.

$('span.readMore').css({"cursor" : "pointer", "color" : "blue", "font-size" : ".8em"}).click(function()

Следующим шагом задаем span с классом “readMore” некоторый CSS. Мы поменяем курсор на указатель для того, чтобы пользователи могли увидеть, что этот span кликабельный. Далее мы поменяем цвет, чтобы выделить, и немного уменьшим размер текста. Далее запустим функцию, когда кликнут по span.

$('p:eq(1)').fadeIn("slow");
$(this).fadeOut("normal");

Когда кликнут, мы собираемся найти второй параграф и медленно показать его. Затем “this” (span, по которому кликнули) будет “растворяться” в течении 0.4 секунды (“normal”).

Это всё, что надо сделать!

Популярность: 24%