标签: jquery-effects

是否可以将效果应用于jquery-ui选项卡,我还没有看到它的任何示例,我很确定如果可能以下内容不正确:

<script type="text/javascript">
    $(function() {
        $("#tabs").tabs();
        $("#tabs").effect(slide,options,500,callback);
    });
</script>

当你在jQuery中鼠标悬停链接时,我试图实现一个很好的淡化效果.

到目前为止,我有:

$('a').hover(
function () { 
    $(this).animate({ color: '#fff' }, 1000 );
},
function () { 
    $(this).animate({ color: '#000' }, 1000 );
});

哪个确实工作正常.但是,想象一下,如果链接是导航,彼此接近.如果您尝试从一个链接悬停到旁边的链接并返回几次.链接会逐渐消失,如果有动画已经发生,我如何阻止事件"排队"？

任何建议赞赏!

我对jQuery有一个简单的问题,请查看:http://jsfiddle.net/4Q5uQ/

如何在fadeOut()效果完成后淡出()框？

正如标题所述,是否有一个jQuery插件效果,这将允许我以一种像Windows一样松散的方式隐藏div？因此div会移动,缩小,并对屏幕上的某个点变得透明.这是一个例子:http://fstoke.me/jquery/window/这几乎是我正在寻找的东西,除了我认为不可能只使用效果.

我正在寻找一种方法来使用jQuery正确地动画/交叉淡化内联锚元素.块元素有几种解决方案,但内联元素到目前为止还没有.

我对每个单词的替代文本来自元素中的属性:

<a data-r="nerd">word</a>?

但如果我尝试淡出,请替换文本并淡入,如下所示:

jQuery(document).ready(function($) {
$('a').click(function(index) {
    $(this).fadeOut(500, function() {
        $(this).text($(this).attr("data-r"));
    });
    $(this).fadeIn(500);
    });
});?

我没有得到我想要的交叉淡入淡出效果,但是在这个演示中你可以看到fadein的淡出效果.

我会非常感谢您提供的任何提示.

我试图创建没有任何外部插件的jQuery颜色动画.到目前为止,我可以设法用jQuery-ui做到这一点,但我想用这种方式学习pure jQuery animate()

有没有可能用更少的代码和1.8上没有任何外部jQuery插件来做到这一点？

这是使用jQuery 1.7.2和ui的 jsFiddle示例

jQuery的:

var Text = $('h1');
var Box = $('.box');

Text.click(function() {
    Text.animate({'color':'#f00'},600)
        .delay(200).animate({'color':'#ff0'},600)
        .delay(200).animate({'color':'#000'},600);
});

Box.click(function() {
    Box.animate({'background-color':'#f00'},600)
        .delay(200).animate({'background-color':'#ff0'},600)
        .delay(200).animate({'background-color':'#000'},600);
});

我已经包含了我需要的jQuery UI和jQuery核心,但仍然以下不会工作:

<div id="a" style="width: 500px; height: 500px; background-color: #F00; border: 1px solid #00F;">Click me</div>
<div id="b" style="width: 50px; height: 50px; background-color: #0F0; border: 1px solid #00F;"></div>

和

$(document).ready(function () {
    $('#a').click(function () { 
        $(this).effect(
            'transfer', 
            { to: $('#b') }, 
            1000
        ); 
    });
});?

你可以在这里找到一个JSFiddle示例

我试图找出如何使用jQuery在多个元素上排队动画.

例如,我需要在屏幕上移动元素.然后,当完成后,移动下一个,等等.

这也许就是一个项目列表......一个接一个地落实到位.

有人可以帮帮我吗？

我是否需要使用每个动画的onComplete函数来启动下一个动画？

更新:简单的例子.

<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul>

我想让他们每个人逐一淡出.SO项目1淡入.然后当完成时,项目2淡入等等.

我正在使用jQuery将一些Flash"页面构建"类型的动画转换为HTML.所以我需要在多个元素上排队动画.就像制作一个盒子一样,并将一些文字滑到它上面......等等.

我正面临一个我无法自己解决的问题:

我得到了一个背景图像的div,我想在点击div时向上/向下滑动.问题是图像总是完全滑动(100%),所以它消失了.我希望它能保持在20%之内,这样你就可以点击它并再次向下滑动100%.

我试过.animate()但是它改变了图片的宽高比,它不会滑出来.

我检查了像http://spoonfedproject.com/jquery/jquery-slide-with-minimum-height/这样的解决方案,其中div滑入/滑出,但它没有背景图片......

有人有个主意吗？我真的很感激!

JS小提琴:http://jsfiddle.net/JmLqp/105/

HTML代码

<div id="contact"></div>

CSS代码

#contact{
 width:162px;
 height:336px;
 background: url(http://s18.postimage.org/kl4b1rly1/bg_contact.png) no-repeat;
}

JS代码

$("#contact").click(function () {
  $(this).hide("slide", {direction: "up"}, 1000);
});

码:

$(document).ready(function() {
    $('.some_class').slideDown(1000).fadeIn(5000);
});

使用上面的一个,我想滑动一个div,同时让它淡入淡出.上面的那个似乎不起作用.我究竟做错了什么？