исчезать текст внутри DIV - PullRequest
Новая
       5

исчезать текст внутри DIV

0 голосов
/ 09 сентября 2010

ОК, помните, как я хотел, чтобы ИЗОБРАЖЕНИЕ входило и выходило согласно слову? Я не знаю, о чем я думал, но я был неправ. Я хотел, чтобы текст входил и выходил.

Теперь в чем проблема? Все так, как я хочу, за исключением ОДНОЙ вещи ... возможно ли иметь возможность обновлять DIV HTML таким образом, чтобы он исчезал при переходе? Может быть, с помощью jQuery?

Вот что у меня есть: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

    <title>Untitled 2</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript">
    $(function() {
   $('#textfield').keyup(function () {
     switch($(this).val()) {
       case 'dan':
         $('#dan').html("<b>Dan is the name!</b>");
         break;
       case 'apple':
         $('#dan').html("<b>Apples are good!</b>");
         break;
     }
   });
});

</script>

</head>

<body>

<input type="text"  name="dan" id="textfield" />
<div id="dan">Lorem impulse dolor...</div>
</body>
</html>

Ответы [ 2 ]

2 голосов
/ 09 сентября 2010

Как насчет чего-то вроде этого вместо перекрестного затухания: 

<script type="text/javascript">
$(function() {
    $('#textfield').keyup(function () {
     switch($(this).val()) {
       case 'dan':
         $('#dan').fadeOut("fast",function() { $(this).html("<b>Dan is the name!</b>").fadeIn("fast"); });
         break;
       case 'apple':
         $('#dan').fadeOut("fast",function() { $(this).html("<b>Apples are good!</b>").fadeIn("fast"); });
         break;
     }
    });
});

</script>

Исчезает старый текст, переходит к новому тексту и постепенно.

Вы можете добиться перекрестного затухания с помощью элементов абсолютного позиционирования и, как предлагается, используя z-index. Это сложно, но может быть достигнуто (теоретически). Это просто и более или менее достигает желаемого эффекта.

0 голосов
/ 09 сентября 2010

Нет, это невозможно сделать только для одного <div>, у вас должно быть два <div> элемента, расположенных один над другим, используя z-index, один из которых содержит <b>Dan is the name!</b>, а другой - <b>Apples are good!</b> изатем исчезните, а затем исчезните.

Надеюсь, я правильно понял ваш вопрос.

...