Как правильно управлять функцией ввода/вывода слайдов в jQuery?

-1

Я новый программист jQuery, поэтому любая помощь, которую вы можете мне дать, будет очень оценена, мой текущий проект пытается создать навигационную панель, которая, когда будет зависеть ссылка, появится описание этой страницы. Проблема, которая продолжает возникать, заключается в том, что описание появляется после, ссылка была обработана, а не пока. Это действительно начинает раздражать меня, и я еще ничего не нашел в Интернете.Как правильно управлять функцией ввода/вывода слайдов в jQuery?

Это JQuery Я использую:

$(document).ready(function() { 

$(".home").hover(function() { 
    $(".nav-p-blurb").toggle("slide"); 
    $(".nav-p-blurb").text("This is a home page blurb and it will talk about the home page like the other blurbs will talk about their specific pages and hopefully appear correctly"); 
}); 

});

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

Вот HTML и CSS Я использую:

HTML:

<title>website</title> 
    <link rel="stylesheet" href="styles/navbar.css"> 
    <link rel="stylesheet" href="styles/index.css"> 
    <script src="scripts/jquery.js"></script> 
    <script src="scripts/navbar.js"></script> 

</head> 

<body class="document"> 


<table class="nav-table"> 
<tr> 
    <td width="600" class="nav-img"> 

    <img class="nav-img" src="img/header-img.png" width="600" height="200"> 

    </td> 

    <td width="100" class="nav-links-td"> 

    <div class="nav-links"> 
    <div class="nav-b-div"><a href="#" class="nav-buttons home">Home</a></div> 
     <br> 
    <div class="nav-b-div"><a href="#" class="nav-buttons about">About</a></div> 
     <br> 
    <div class="nav-b-div"><a href="#" class="nav-buttons projects">Projects</a></div> 
     <br> 
    <div class="nav-b-div"><a href="#" class="nav-buttons links">Links</a></div> 
    </div> 

    </td> 

    <td class="nav-blurb"> 

    <p class="nav-p-blurb"></p> 

    </td> 
    </tr> 
</table> 


</html>

CSS:

.document { 

margin: 0px; 

} 

.nav-table { 

left: 0px; 
width: 100%; 
height: 200px; 
display: table; 
border-collapse: collapse; 
border-spacing: 0px; 
border-color: gray; 


} 

td { 

padding: 0px; 
border: 0px; 

} 

.nav-img { 

left: 0px; 
width: 600px; 
padding: 0px; 

} 

.nav-links-td { 

left: 50%; 
width: 100px; 

} 

.nav-b-div { 

background: #ffffff; 
width: 0px; 

} 

.nav-b-div { 

transition: width 0.2s; 
-moz-transition: width 0.2s; 
-webkit-transition: width 0.2s; 
-ms-transition: width 0.2s; 

} 

.nav-b-div:hover { 

background: #efefef; 
width: 100%; 

} 

.nav-buttons { 

text-decoration: none; 
color: #000000; 
font-family: arial; 
font-size: 16px; 
padding-left: 5px; 

} 

.nav-blurb { 

height: 100px; 
background: #efefef; 
overflow-x: visible; 


} 

.nav-p-blurb { 

text-decoration: none; 
color: #1C1C1C; 
font-family: arial; 
font-size: 16px; 
padding-left: 5px; 
padding-right: 5px; 
position: fixed; 
top: 16px; 
overflow-x: visible; 

}

Еще раз, я буду признателен за любую помощь, даже если только советы для моего HTML и CSS.

Thankyou.

источник

2014-02-14 theonlygusti

Можете ли вы создать простой jsfiddle, чтобы продемонстрировать проблему? –

Вместо добавления отдельной функции для каждой кнопки меню Добавлю поле данных для каждого HREF, который содержит текст, который будет отображаться, и я буду запускать функцию следующим способом:

$(".nav-buttons").hover(function() { 

$(".nav-p-blurb").show(); 
$(".nav-p-blurb").text($(this).attr("data-mytext")); 
});

Сохраняет сценарий более ясность и простота обзора.

См полный набор рабочий набор: here

UPDATE: По желанию пользователя я обновил fiddle код с FadeIn/Out эффект Пожалуйста, смотрите ниже:

$(".nav-buttons").hover(function() { 
$(".nav-p-blurb").stop(); 
$(".nav-p-blurb").fadeTo(0,0); 
$(".nav-p-blurb").text($(this).attr("data-mytext")); 
$(".nav-p-blurb").fadeTo("slow",1); 
});

ПОСЛЕДНЕЕ ОБНОВЛЕНИЕ Как запрошено пользователем, он хотел бы, чтобы текст также скользил влево-вправо так же, как и в меню. Пожалуйста, см. here обновленная скрипка. Чтобы сделать подобный эффект, вам понадобится div, который скрывает содержимое, чем анимируется ширина.

UPDATE

Да, может, но у вас есть 3 рабочих примеры из себя и некоторых других объяснений от других, а также, так что вы должны, по крайней мере, попытаться выяснить это самостоятельно. Никто здесь не пишет код бесплатно для других, речь идет о помощи и поддержке не о том, чтобы делать работу вместо вас. Об этом говорится в последнем примере примера here.

источник

2014-02-14 14:32:45

Спасибо за ваше предложение, он работает очень хорошо - но не существует ли способа анимации текста внутри '.nav-p-blurb'? – theonlygusti

Какую анимацию вы хотите добавить? –

Это так здорово! Это работает удивительно, но есть ли способ изменить направление анимации? Проект был бы идеальным, если бы, когда он зависел, ссылки завершали их анимацию, а затем - анимация рекламного ролика, и она продолжается в том же направлении, что и анимация ссылки. Это будет потрясающе, если вы сможете заставить его работать. К счастью, за всю вашу помощь это потрясающе! – theonlygusti

Метод hover в jquery обычно требуется 2 обработчика, один для mouseIn и один для mouseOut. Я немного изменил код, включив оба обработчика.

Вот рабочая скрипку: fiddle

Это то, что вы ищете?

источник

2014-02-14 13:49:29 Bobby5193

Удивительный, я не понимал, что мне нужно было добавить состояние по умолчанию. Спасибо за вашу помощь! – theonlygusti

Может быть, это:

$(".home").hover(
    function() { 
     $(".nav-p-blurb").text("This is a home page blurb and it will talk about the home page like the other blurbs will talk about their specific pages and hopefully appear correctly").show(); 

    }, function() { 
     $(".nav-p-blurb").hide().text(""); 
    } 
);

источник

2014-02-14 13:53:12 lshettyl

Изменения в HTML:

<td class="nav-blurb"> 
     &nbsp; <!-- add this to your html to make td visible --> 
     <p class="nav-p-blurb"></p> 

    </td>

Изменения в CSS:

.nav-p-blurb { 
    text-decoration: none; 
    color: #1C1C1C; 
    font-family: arial; 
    font-size: 16px; 
    padding-left: 5px; 
    padding-right: 5px; 
    position: fixed; 
    top: 16px; 
    overflow-x: visible; 
    display:none; /* make p invisible */ 
}

Изменения в JS:

$(document).ready(function() { 
    $(".home").hover( 
     function() { 
      $(".nav-p-blurb").text("This is a home page blurb and it will talk about the home page like the other blurbs will talk about their specific pages and hopefully appear correctly"); 
      $(".nav-p-blurb").fadeIn(1000); 

     }, function() { 
      $(".nav-p-blurb").hide().text(""); 
     } 
    ); 

});

источник

2014-02-14 14:06:12

Есть ли способ, который я могу подождать 0,2 секунды, прежде чем начать эффект постепенного затухания? И, если возможно, я могу подождать 0,2 секунды, а затем текст появится при движении салфетки? Как показано на рисунке? – theonlygusti

$ (".nav-p-blurb") .delay (200) .fadeIn (1000); –

Как правильно управлять функцией ввода/вывода слайдов в jQuery?

ответ

Смежные вопросы