标签: jquery-animate

我有一些jQuery，可以在单击时平稳地调整文本输入的大小。一切正常，除了单击字段以外的小问题时，该字段将重置。

令人讨厌的部分是，当您在该字段中键入内容，然后在该字段之外单击时，将删除您输入的所有数据。

我如何才能不清除用户单击时输入的文本？

继承人的jsfiddle

和

这是jQuery：

    var inputWdith = '250px';
    var inputWdithReturn = '140px';     
    $(document).ready(function() {
        $('input').focus(function(){

            $(this).val(function() {
                $(this).val(''); 
            });

            $(this).animate({
                width: inputWdith
            }, 400 )
        }); 

        $('input').blur(function(){
            $(this).val('Enter info...');
            $(this).animate({
                width: inputWdithReturn
            }, 500 )
        });
    });

单击任何菜单链接时,我想在当前页面上播放快速动画,然后转到所单击链接的URL.

我将非常感谢您的专业帮助!

你会如何创造这样的东西？

http://www.bikingboss.com/

(水平移动鼠标).我只想要一些通用指南/最小代码,你在哪里盯着看,我学会了一些 HTML5(diveintohtml5.ep.io),我认为这与画布有关,对吗？

这是我的相关代码,我根据我点击的位置切换图像.我有办法逐步切换图像吗？切换时可能会激活它们吗？淡出淡出淡出.

<script type="text/javascript">
    jQuery(document).ready(function ($) { //fire on DOM ready
        $('#mainproductpicture').addpowerzoom({
            defaultpower: 2,
            powerrange: [2, 5],
            largeimage: null,
            magnifiersize: [200, 200] //<--no comma following last option!
        })

        $('#smallpictureone').click(function () {
            $("#mainproductpicture").attr("src", $(this).attr("src"));

            $('#mainproductpicture').addpowerzoom({
                defaultpower: 2,
                powerrange: [2, 5],
                largeimage: null,
                magnifiersize: [200, 200] //<--no comma following last option!
            })
        });

        $('#smallpicturetwo').click(function () {
            $("#mainproductpicture").attr("src", $(this).attr("src"));

            $('#mainproductpicture').addpowerzoom({
                defaultpower: 2,
                powerrange: [2, 5],
                largeimage: null,
                magnifiersize: [200, 200] //<--no comma following last option!
            })
        });

        $('#smallpicturethree').click(function () {
            $("#mainproductpicture").attr("src", $(this).attr("src"));

            $('#mainproductpicture').addpowerzoom({
                defaultpower: …

以下是将隐藏的所需跨度

<span class="lastSave" name="lastSave">Last Saved by <i name="lastSavedBy"></i> at <i name="lastSaved"></i> </span>

页面下方有一个表格.

以下是在某些事件中调用的javascript中的相关函数.请注意,这个使桌子向上移动.

function hideLastSaved(form){
    jQuery(' [name="lastSave"]').hide();
}

function showLastSaved(form){
    jQuery(' [name="lastSave"]').show();
}

在javascript中替换上面的代码段,我尝试了以下内容.这不会使桌子向上移动.但是这个有一些淡出,这在我的应用程序中是不希望的.

function hideLastSaved(form){
    jQuery(' [name="lastSave"]').animate({opacity:0});
}

function showLastSaved(form){
    jQuery(' [name="lastSave"]').animate({opacity:100});
}

我正在使用jQuery animate(),它只是不起作用.我正试图让一个div从另一个包含它的div中滑出来overflow:hidden.我已尝试过leftanimate的所有组合,没有任何东西.为了确保,我也尝试改变div(画廊)的宽度,它确实改变了宽度,但不改变左边.

我究竟做错了什么？

function an() {

  //$('#gallery').fadeOut();
  //$('#gallery').animate({left:'-=1000'},'slow');
  $('#gallery').animate({
    'left': '+=100px'
  }, 'slow');

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div align="center" style="position:relative; height:137px; overflow:hidden; width:1000px; border:3px solid #ff0000;">
  <div id="gallery" style="background-color:#033; width:100px; height:137px;"></div>
</div>
<a href="#" onclick="an(); return false;">test</a>

在JSFiddle上查看

 $(function() {
    $(".flexslider img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "-bw.png";
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("-bw.png", ".png");
            $(this).attr("src", src);
        });
    });

我有一个出现在wordpress主题的大多数页面上的轮播，当鼠标悬停在旧的src + -bw或任何后缀上时，我需要将任何轮播中的任何图像更改为新的attr。但这需要补间或设置动画。上面的代码更改了图像，但不设置动画。还有很多人建议预加载要在悬停时显示的图像吗？

我有以下HTML:

<div class="olympics" style="display: block; position: absolute; left: 250px; top: px;">

   <a style="display: inline-block; float: left; height: 20px; margin: 5px;" href="#">Link 1</a>
   <a style="display: inline-block; float: left;  height: 20px; margin: 5px;" href="#">Link 2</a>

 </div>?

和JS:

$('.olympics a').hover(function() {
    $(this).animate({
        backgroundColor: "#aa0000",
        color: "#fff"
    }, 1000);
}, function() {
    $(this).animate({
        backgroundColor: "#fff",
        color: "#aa0000"
    }, 1000);
});?

知道为什么这个动画不起作用？

这里有jsfiddle演示:http://jsfiddle.net/Seefeld/NzhxH/13/

我有一个脚本,当它被加载时会在图像中淡入,以防止使用$(elem).load()的丑陋加载动画.功能.

我的问题是,有时页面上会有一些图像没有被淡入.这可能是因为没有触发加载事件.我已经检查了控制台是否有错误,但是找不到任何东西......它并不总是会发生,但它会偶尔发出请求.

剧本:

// Function to be applied to any element
jQuery.fn.preFade = function( speed, callback ) {
    this.load(function(){
        $(this).fadeIn(speed, callback);
    });
};

// The .prefade class has display: none; applied to it in my CSS
$(document).ready(function(){
    $('.prefade').preFade(1000);
});

最让我感到困惑的是,虽然没有触发加载事件,但实际上是加载了图像.我知道这个的原因是因为当我检查元素并将其更改为display:block; 来自display:none; 图像出现.

我有一个想法可能是我所缺少的事件被称为事件的顺序......

以下jquery代码有什么问题？

我觉得这很简单,但我找不到有什么问题.是否有可能使用.animate()之后.find()？

if (!$('#slide-img1').is(':visible')) {
    $('#slide-img1').find('.box-ft1').animate({ "top": "2%" }, "slow" );
}