تحوم fadein fadeout.

Question

أحاول إنشاء تحريك على الإجراء الذي يجلب صورة ملونة وأيضا بمجرد إزالة التحريك يتلاشى مرة أخرى إلى صورتها الأصلية.

حاليا يتلاشى الصورة إلى لا شيء ثم يتلاشى الجديد في. هذا سيبقى في مكانه بغض النظر عما إذا كنت أحرز أو لا.

//Loop through the images and print them to the page
   for (var i=0; i < totalBoxes; i++){
    $.ajax({
     url: "random.php?no=",
     cache: false,
     success: function(html) {
      // following line I originally suggested, but let's make it better...
      //$('#bg').append(html).fadeIn('slow');
      // also note the fine difference between append and appendTo.
      var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
      $('img', $d).hover(function() {
       var largePath = $(this).attr("rel");
       $(this).fadeOut("slow", function() {
        $(this).attr({ src: largePath }).fadeIn("slow");
       });
      });
     }
    });
   }

تحديث:

يرجى إلقاء نظرة على هذا الرابط:

http://www.yellostudio.co.uk/temp/index.php#

أحاول الحصول على الصور لعبور قبضة على التمرير والخروج على fadeout ...

هل يمكن لأي شخص أن يساعد، قريبا جدا وقد قضيت ساعات وساعات في محاولة للحصول على رأسي حول هذا ...

Answer 1

حسنا، شكرا لكم جميعا لمساعدتكم ... لقد حصلت على مكان ما ... أنا لست سعيدا تماما كما كان أبطأ مما كان يهدف أصلا لأنني أحمل صورتين الآن كما apposed to One ... باستخدام سمة REL جعلها كثيرا أسرع لأنني كنت جرس الصورة فقط على تحوم ...

ولكن هنا هو الحل شكرا لك جميعا ...

          //Loop through the images and print them to the page
        for (var i=0; i < totalBoxes; i++){
            $.ajax({
                url: "random.php?no=",
                cache: false,
                success: function(html) {

                    var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
                    $('#colour img').css("opacity", 0);
                    $('img', $d).hover(function() { 
                        $(this).stop().fadeTo(700, 1);
                    },function() {
                        $(this).stop().fadeTo(700, 0);
                    });

                }
            });
        }

وطبع php الخاص بي ...

<div class="pf-box">
    <a href="#">
    <div class="black"><img src="'.$image_folder.'/'.$image_name.'.jpg" alt="'.$image_name.'" border="0" /></div>
    <div class="colour"><img src="'.$image_folder.'/'.$image_name.'-c.jpg" alt="'.$image_name.'" border="0" /></div>
    </a>
  </div>

Answer 2

hover() يأخذ اثنين من المعلمات وظيفة، واحد ل mouseover والآخر ل mouseout. وبعد لقد قدمت فقط الأول. ستحتاج إلى توفير الثاني للتراجع عن صورة تبديل mouseout.

إذا كنت تريد fadeOut و fadeIn أن تكون متزامنة، لا تضع fadeIn في رد fadeOut. وبعد فقط اجعلها بيانات منفصلة:

$(this).fadeOut("slow");
$(this).attr({ src: largePath }).fadeIn("slow");

الطريقة التي لديك بها، fadeIn لا يبدأ حتى fadeOut تم. بهذه الطريقة، سوف يبدأوا وننتهي في نفس الوقت.

Answer 3

أعتقد أنك بحاجة إلى تخزين مسار الصورة الأصلي (وهو ما تريد أن تتلاشى مرة أخرى إلى التحفير، يمينا)، ثم استعادته على التحريك.

var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
$('img', $d).hover(function() {
    var largePath = $(this).attr("rel");
    $(this).data('orig', $(this).attr('src') );
    $(this).fadeOut("slow", function() {
         $(this).attr({ src: largePath }).fadeIn("slow");
     });
},function() {
    var origPath = $(this).data('orig');
    $(this).fadeOut("slow", function() {
         $(this).attr({ src: origPath }).fadeIn("slow");
     });
});

على افتراض أن الصورة "المشرقة" تستخدم كسمية SRC وتستخدم العتامة لتحقيق التأثير.

var $d = $(html).hide().appendTo('#bg');
$('img',$d).css('opacity',0.33);
           .hover( function() {
               $(this).fadeTo('slow',1.0);
            }, function() {
               $(this).fadeTo('slow',0.33);
            });

Answer 4

قد أقترح: http://colorpowered.com/lend/

سوف تفعل ما تبحث عنه القيام به.

---

يحرر:حسنا، حسنا، لأحد، أود بالتأكيد تغيير جزء AJAX من التعليمات البرمجية الخاصة بك لإرجاع جميع صورك عبر JSON (حتى أفضل أود أن أفعل ذلك على الطرف الخلفي، لكنني لست متأكدا من كيفية موقعك اقامة). على أي حال، يبدو أنك تلاشى صورتك الأخرى دون داع. ببساطة ضع صورة اللون فوق الصورة الأخرى ذات المواقع المطلقة. ربما يمكن أن تبدو الكود الخاص بك شيء مثل هذا:

جافا سكريبت:

$.ajaxSetup({cache:false});
$('.hoverImg').live('mouseover',function() {
   $hovered = $(this);
   var colorPath = $hovered.attr("rel");
   var rndId = Math.floor(Math.random()*100000);
   var $colorImg = $('<img />');
   $colorImg
       .hide()
       .addClass("fader")
       .attr('src',colorPath)
       .attr('id','img_'+rndId)
       .css({position:'absolute',zIndex:10});
   $hovered.css({zIndex:9}).data('overImgId',rndId).before($colorImg);
   $('#img_'+rndId).stop().fadeIn("slow");
});
$('.hoverImg').live('mouseout',function() {
    var rndId = $(this).data('overImgId')
    $('#img_'+rndId).stop().fadeOut("slow");
});
$.getJSON('random.php',{numBoxes:totalBoxes},function(json) {
    if(json.length > 0) {
        $.each(json,function(i,val) {
            $(val).hide().appendTo('#bg').find('img').addClass('hoverImg');
        });
    }
});

بي أتش بي:

<?php //random.php (really simplified, probably)
if(isset($_GET['numBoxes']) && !empty($_GET['numBoxes'])) {
    /*
        Get all the html stuff you need into an array...
        Could look something like:
        $imgs = array(
            '<div><img src="foo.jpg" rel="color_foo.jpg" /></div>',
            '<div><img src="bar.jpg" rel="color_bar.jpg" /></div>'
        );
    */
    echo json_encode($imgs);
}

يجب أن تعمل أساسا. قد يكون هناك بعض الأخطاء المطبعية والأشياء هناك ولكن، من ما يمكنني أن أقول إليه، يجب أن يعمل. بالطبع، اعتمادا على السيناريو الخاص بك، قد تحتاج إلى قرص / تغيير بعض هذا.

حظا سعيدا في مشروعك!

تحرير مهم: نسيت إضافة جزء مفتاح إلى رمز PHP. أضفت أجسام "REL" إلى <img> العلامات.

Answer 5

يمكنك القيام بذلك باستخدام بعض التعليمات البرمجية الإضافية. ضع الصورة الملاشي في أعلى صورة التلاشي، مع مجموعة التعتيم إلى 0. إضافة رمز التحريك إلى الصورة الملاشي (في الأعلى، لذلك يحصل الأحداث).

$('#top-image').hover(function() {
$(this).stop().fadeTo(1000, 1);
$('#bottom-image').stop().fadeTo(1000, 0);
},
function() {
$(this).stop().fadeTo(1000, 0);
$('#bottom-image').stop().fadeTo(1000, 1);
});

يتلاشى كل من الصور داخل وخارجها، ومع استخدام وظيفة الإيقاف ()، لن يؤدي الفجوة داخل وخارجها بسرعة إلى سلسلة من الرسوم المتحركة المتكررة.

Answer 6

إذا كنت ترغب في القيام بعملية تتلاشى، فأنت بحاجة إلى صورتين، واحدة تلاشى، وواحد يتلاشى بشكل متزامن. ألق نظرة على صفحة فعلت مع هذا التأثير. يكتب البرنامج المساعد IS في مصدر الصفحة حتى تتمكن من إلقاء نظرة عليه. سوف تحتاج الصورتين إلى position: absolute; بحيث تكون تتلاشى أن تشغل نفس المنطقة من الصفحة.

ومثل عدم وجود مفاجآت، أنت تقدم فقط رد اتصال hover بالنسبة للماوس "تحوم، وليس الماوس Un-Hover الذي هو المكان الذي ستعود فيه إلى الأصل.

قد يعمل هذا الرمز، تذكر المواقع المطلقة في CSS الخاص بك، وقد ترغب في إضافة فئة CSS إلى Backimg، ويجب أن تكون الصور في عنصر وسيط منفصل يتم الاشتراك في الحدث المرحوم في:

for (var i=0; i < totalBoxes; i++){
    $.ajax({
        url: "random.php?no=",
        cache: false,
        success: function(html) {
            $(html)
                .hide()
                .appendTo('#bg')
                .fadeIn('slow')
                .children('img').each(function() {
                    var img = $(this);
                    var largePath = img.attr("rel");
                    var backImg = $("<img src='" + largePath + "'/>");
                    img.after(backImg);

                    img.parent().hover(
                        function() { // over
                            backImg.stop().fadeIn("slow");
                            img.stop().fadeOut("slow");
                        },
                        function() { // out
                            backImg.stop().fadeOut("slow");
                            img.stop().fadeIn("slow");
                        }
                    );
                });
        }
    });
}

Answer 7

رصدت مشكلة هنا ...

var backImg = $("<img src='" + largePath + "'/>");

هذا ليس محدد صالحا. جرب هذا بدلا من ذلك:

var backImg = $('img[src="' + largePath + '"]');

لا تريد استخدام <> في المحدد الخاص بك، وينبغي أن يبدو بناء جملة محدد سمة مثل هذا: [ATM = "القيمة"
يجب أن نلاحظ أنني عكس استخدام "و" في التعليمات البرمجية - هذا فقط كيف أفعل ذلك، إنه متطابق بشكل صحيح. لا يوجد شيء خاطئ مع اختيارك من الاقتباسات.

Answer 8

في StyleSheet، أضف:

.colour {
  display:none;
}

ثم جعل وظيفة النجاح الخاصة بك قراءة:

var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
$('.pf-box', $d).hover(function() {
  $('.colour', $(this)).fadeIn("slow");      
},function() {
  $('.colour', $(this)).fadeOut("slow");      
});

تحديث

لحل مشكلة التحميل البطيئة، ستحتاج إلى إرجاع PHP كائنا لجميع الصور مثل ذلك (دعنا نقول أنه يسمى Images.php - ضع الرمز أدناه من داخل <?php ?>) (كنت ترغب في استخدام json_Encode () لكنه كان على إصدار أقدم من PHP):

header('Content-type: application/json');
echo '{
  {'black' : 'url', 'colour' : 'url'},
  {'black' : 'url2', 'colour' : 'url2'}
}';

ثم في جافا سكريبت تريد:

//generate all the boxes
$.get('images.php',function(data){
  for (var i=0; i < totalBoxes; i++){
      var randomImage = data[Math.floor(Math.random() * data.length)];
      $('<div class="pf-box"><img class="black" src="' + randomImage['black'] + '" /><img class="colour" src="' + randomImage['colour'] + '" /></div>').hide().appendTo('#bg').fadeIn('slow').filter('.colour').css("opacity", 0);
  }
 },'json');

 //add the hover behavior to all the elements
 $('.pf-box').hover(function() {
   $('.colour',$(this)).stop().fadeTo(700, 1);
 },function() {
   $('.colour',$(this)).stop().fadeTo(700, 0);
 });

يجب أن يعمل هذا الرمز ... لكنني لم اختبرها. قد يكون هناك الأخطاء المطبعية. ولكن هذا هو جوهرها.