Question

我目前正在开发一个项目，并使用Twitter Bootstrap和jQuery设计顶部导航栏。我有一个搜索栏，用户可以使用该搜索栏进行搜索查询。如下所示，“占位符”的值为“Car”。我希望jQuery改变“占位符”的值。 jQuery应该从数组中选择一个随机值（字符串），当文本在x秒之间变化时，应该有一个平滑过渡（淡入淡出和淡出）。

<div class="span4">
    <form class="navbar-search input-append">
        <input id="appendedInputButton" type="text" class="input-xlarge" placeholder="Cars">
        <button class="btn" type="button"><i class="icon-search"></i></button>
    </form>
</div>

Answer 1

这将每1秒替换占位符：

$(function() {

   var fonts = ['Times New Roman', 'Arial', 'Tahoma'];
   var time = setInterval(function() {
       var newFont = fonts[Math.floor(Math.random()*fonts.length)];
       $('#appendedInputButton').attr('placeholder', newFont);
   },1000);

});

jsFiddle here。在淡入淡出方面，您可能无法重新创建所需的功能。 jQuery提供了通过fadeOut()或animate()实现淡出的好处，但它们只影响DOM元素本身及其CSS属性之一 - 而不是属性。

Answer 2

@hohner似乎在这里做了很多努力！也许可以使用CSS转换来处理淡入淡出。我知道会有跨浏览器问题，但这是一个开始。

这是他的工作分支，其中包含第二种字体文本颜色发生变化的概念验证。 http://jsfiddle.net/panchroma/qpUN6/

对我而言，这适用于Mac Chrome和Safari。要使所有字体更改都能正常工作，您需要在两个已知值之间循环标记类。 Javascript不是我的力量，但我相信其他人可以采取另一个步骤;）

CSS选择器就像这样

#appendedInputButton.marker::-webkit-input-placeholder {
color: blue;
}
#appendedInputButton.marker:-moz-placeholder {
color: blue;
}

我从this source

中选择了占位符文字，从中获得了帮助

并且转换是标准

#appendedInputButton::-webkit-input-placeholder{
transition: all 2s;
-webkit-transition: all 2s; /* Safari and Chrome */
}

我把它减慢到2秒，这样你就可以看到发生了什么。 CSS转换在我的Firefox中不起作用，不知道为什么。

祝你好运

如何使用jquery从数组中每隔几秒更改一次文本

2 个答案: