Jquery toggle（）函数不工作与hoverwords（）滑动字母扩展 [英] Jquery toggle() function is not working with hoverwords() Sliding Letters extension
问题描述
我有2个div，每3秒切换一次。现在为div中的文本，我使用一个扩展名称滑动字母，你可以看到在这里的演示。 http://tympanus.net/Development/SlidingLetters/
问题是，它单独工作，但现在与切换。
我的工作版本位于这里 http：// webmaster。 lk / n /
，因为您可以看到它没有显示文字IMAGE 2，除非您将其悬停一次。
有人可以帮我解决这个问题吗？
href =http://jsfiddle.net/KuW6K/5/ =nofollow> http://jsfiddle.net/KuW6K/5/
没有hoverwords（） - http://jsfiddle.net/KuW6K/4/ 这是
< body style =background：#cdcdcd;>
< div class =sl_examples>
<！ - 需要每3秒显示一个链接 - >
< a href =＃id =example2class =tamdata-hover =image3> image4< / a>
< a href =＃id =example1class =sindata-hover =image1> image2< / a>
< / div>
< / body>
更新
字母滑动扩展的示例演示 - http://tympanus.net/Development/SlidingLetters/
更新2
我删除了toggle（）是在答案1，它被提及为toggle（）是贬值。但仍然不好。
$（document）.ready（function（）{
setInterval（function
if（$（＃example1）。is（：visible））
$（＃example1）hide（）;
else
$ ＃example1）。show（）;
if（$（＃example2）。is（：visible））
$（＃example2）。hide ;
else
$（＃example2）。show（）;
}，3000）;
}）;
更新3
我已将来源附在这里供您参考， https://www.mediafire.com/?fi8547rhm1q8ixt
更新4
实际上它只能在鼠标进入时小鼠离开。但这里的问题是，（检查此） http://webmaster.lk/n/ 首先它显示IMAGE 4（红色背景），当你悬停它时IMAGE 3出现（浅蓝色字母）然后再3秒，绿色纯背景没有文字IMAGE 2.这是为什么它不工作的问题
您的初始问题是由于您设置了＃example1 显示无;
＃example1 {
background：green;
display：none;
}
然后你正在呼叫
$（'＃example1'）。hoverwords（）;
。
因此，只需删除 display：none; css
<$ p $
p> $（'＃example1'）。hoverwords（）;
$（'＃example2'）。hoverwords（）;
$（'＃example1'）。hide（）;
然后在使用jQuery后隐藏它。
Update 4
http://jsfiddle.net/trevordowdle/KuW6K/15/
虽然它工作得很好，你仍然可以触发错误。当来回悬停和 setInterval 同时触发时，会发生这种情况。来自触发器和hoverwords函数的切换如果在接近相同的时间运行，则会相互干扰，并且得不到所需的结果。
一个选项是停止在徘徊时更改的字词。
Like：
jQuery
= false;
setInterval（function（）{
if（！hover）{
$（'＃example1'）。toggle（）;
$（'＃example2' ）.toggle（）;
}
}，3000）;
$（'＃example1'）。hoverwords（）;
$（'＃example2'）。hoverwords（）;
$（'＃example1'）。hide（）;
$（'。sl_examples'）。hover（function（）{
hover = true;
}，function（）{
hover = false;
}）;
CSS
＃example1 {
background：green;
}
http://jsfiddle.net/trevordowdle/KuW6K/14/
如果你宁愿让它重置计时器..这意味着一旦你做完徘徊3秒定时器从0开始。这是另一个例子：
http://jsfiddle.net/trevordowdle/KuW6K/16/
i have 2 divs which toggles in every 3 seconds. now for the text in the div i am using an extension called sliding letters, as you can see in the demo available here. http://tympanus.net/Development/SlidingLetters/
The problem is, it works alone but now with toggle.
i have my working version located here http://webmaster.lk/n/
as you can see it is not showing the text "IMAGE 2" unless u hover it once.
can anybody please help me resolve this ?
i have the same created as a fiddle here, http://jsfiddle.net/KuW6K/5/
without hoverwords() - http://jsfiddle.net/KuW6K/4/ this is working correctly.
<body style="background:#cdcdcd;">
<div class="sl_examples">
<!-- need to show one of the links below every 3 seconds-->
<a href="#" id="example2" class="tam" data-hover="image3">image4</a>
<a href="#" id="example1" class="sin" data-hover="image1">image2</a>
</div>
</body>
Update
sample demo of the letter sliding extension - http://tympanus.net/Development/SlidingLetters/
Update 2
i removed the toggle() and re wrote it this was as in the answer 1 it was mentioned as toggle() is depreciated. but still no good.
$(document).ready(function() {
setInterval(function(){
if($("#example1").is(":visible"))
$("#example1").hide();
else
$("#example1").show();
if($("#example2").is(":visible"))
$("#example2").hide();
else
$("#example2").show();
},3000);
});
Update 3
I have attached the source here for reference, https://www.mediafire.com/?fi8547rhm1q8ixt
Update 4
actually it should only work when mouse enters and mouse leave. but here the problem is, (check this) http://webmaster.lk/n/ first it shows IMAGE 4 (red background) and when you hover it IMAGE 3 appears (light blue letters) then afer 3 seconds, Green color plain background appears without the text IMAGE 2. this is the problem why it is not working as IMAGE 4 works.
解决方案 Your initial issue was caused because you were setting #example1 to display none;
#example1 {
background: green;
display: none;
}
And then you were calling
$('#example1').hoverwords();
This was causing the blank background.
So just remove the display:none; css and call hoverwords on example1 before it's hidden.
$('#example1').hoverwords();
$('#example2').hoverwords();
$('#example1').hide();
And then hide it after using jQuery.
It looks like you have a simillar working solution in your Update 4
http://jsfiddle.net/trevordowdle/KuW6K/15/
While it works well you can still trigger the error. This happens when hovering back and forth and the setInterval triggers at the same time. The toggle from the trigger and the hoverwords function if ran at near the same time interfere with each other and you don't get the desired result.
One option is to stop the words from changing while they are being hovered.
Like:
jQuery
var hover = false;
setInterval(function () {
if(!hover){
$('#example1').toggle();
$('#example2').toggle();
}
}, 3000);
$('#example1').hoverwords();
$('#example2').hoverwords();
$('#example1').hide();
$('.sl_examples').hover(function(){
hover = true;
},function(){
hover = false;
});
CSS
#example1 {
background: green;
}
http://jsfiddle.net/trevordowdle/KuW6K/14/
And if you would would rather have it reset the timer.. Meaning that once your done hovering the 3 second timer starts from 0. Here is another example:
http://jsfiddle.net/trevordowdle/KuW6K/16/
这篇关于Jquery toggle（）函数不工作与hoverwords（）滑动字母扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
