0

我目前正在做一个项目并使用 Twitter Bootstrap 和 jQuery 设计一个顶部导航栏。我有一个搜索栏，用户可以使用它进行搜索查询。正如您在下面看到的，“占位符”的值是“汽车”。我希望 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>
4

2 回答 2

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 在这里。在褪色方面，您可能无法重新创建您想要的功能。jQuery 提供了实现淡出的需要，无论是通过fadeOut()还是animate()，但它们只影响 DOM 元素本身及其 CSS 属性之一——而不是属性。

于 2013-01-27T12:25:04.310 回答
0

@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;
}

我从这个来源中选择占位符文本得到了帮助

过渡是标准 

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

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

祝你好运

于 2013-01-27T15:28:35.050 回答