0

ナビゲーションメニュー項目をクリックすると、垂直サイトの背景画像が変化するという既存の機能があります。

<script type="text/javascript">
$(function() {
    $('a.panel-home').click(function(){
    $("#bgimg").attr('src',"<?php bloginfo('stylesheet_directory'); ?>/images/bg1.jpg");
    return false;
    });
});

新しい背景画像がフェードインするようにアニメーションをこの関数にバインドする方法がわかりません...今のところ、それは過酷で瞬間的な切り替えです。の効果が欲しい

$("#bgimg").fadeIn(1500);

...しかし、javascript/jqueryは少し新しいです。

4

2 に答える 2

1

画像を で囲み、次のようdivに効果を に適用します。div

HTML:

<div><img id="bgimg" src="...."></div>

ジャバスクリプト:

$(function() {
    $('a.panel-home').click(function(){
    $("#bgimg").parent().fadeOut(1000, function() {
        $("#bgimg").attr('src',"<?php bloginfo('stylesheet_directory'); ?>/images/bg1.jpg");
        $(this).fadeIn(1000); 
    });   
    return false;
    });
});
于 2012-09-28T19:04:11.850 に答える
1

それらを同時にフェードするには、次のコードを使用できます。

/* This must be called on 'img' tag. Enhanced to support more than one image, first image in options argument,
 * rest are in more_images argument, which is string array with following format:
 * ["400|1000|apple.png","800|apple2.png", "apple3.png"]
 * with 3 elements in pipe separation they are delay|duration|image
 * with 2 elements they are duration|image
 * and with one element, that's image, the default delay is zero and default duration is 800 
 * 
 * Ignore more_images argument if you only want to transition from one image to another one.
 * Any external code can check if there's an animation running by checking if the parent div of the img
 * being animated has the attribute data-anim . This is useful for external code to check 
 * if the transitions have ended (in an setinterval call for example)*/
jQuery.fn.transictionto = function(options, more_images) {
      var settings = jQuery.extend({
   }, options || {});
   //wrap into div if no div is present.
   $(this).each(function() {
      if ($(this).parent('div').length == 0) {
         $(this).wrap('<div></div>')
      }
      //mark to check if animation is in being done
      $(this).parent().attr('data-anim','1');
      //now swap with background trick
      $(this)
      .parent()
         .css('background-image', 'url(' + settings.destinationImage + ')')
         .css('background-repeat', 'no-repeat')
      .end()
      .fadeOut(settings.duration, function() {
         this.src = settings.destinationImage;
         $(this).show();
         if (more_images != null && more_images.length) {
             var im = more_images.shift().split('|');//shift shrinks array
             var dly = im.length == 3 ? parseInt(im[0],10) : 0;
             var drt = im.length > 1 ? parseInt(im[im.length-2],10) : 800;
             $(this).delay(dly).transictionto({ destinationImage: im[im.length-1], duration: drt }, more_images);
         } else {
             $(this).parent().removeAttr('data-anim');
         }
      });
   });
}

$(function() {
    $('a.panel-home').click(function(){
        destImage = "<?php bloginfo('stylesheet_directory'); ?>/images/bg1.jpg";
        $("#bgimg").transictionto({ destinationImage: destImage, duration: 800 });
        return false;
    });
});

今回は、要素transictionto()に対して関数を呼び出す必要があります。img

于 2012-09-28T20:06:50.963 に答える