为什么这种淡入淡出效果不起作用？

我们有一个图像滑块（royalslider），它与一个颜色选择器连接，用于更改滑块中的图像。为什么这种淡入淡出效果不起作用？

如果您选择一种新颜色，图像会改变。我们喜欢为这种颜色变化添加平滑的淡化效果。

事情是这样的：Oldimage淡出（400）Newimage淡入（400）

我们与导师从codemenor就可以了，但我们无法找到一个解决方案。也许滑块插件阻止平滑的图像更改。 imageslider在一个名为“royalslider”的插件上工作。

这里是项目的链接。 [http://printnil.com/products/kindle-paperwhite?variant=887194723][1]

我们正在寻找一位能够帮助我们的导师。

<div id="product" class="{{ product.handle }}"> 


<div class="productcontainer"> 






<div id="full-width-slider" class="featured royalSlider rsMinW"> 
    <img id = "img1" src = "{{ '1.jpg' | asset_url}}" alt = "{{ product.type }} - {{ product.title }}"/> 
    <img id = "img2" src = "{{ '1.jpg' | asset_url}}" alt = "{{ product.type }} - {{ product.title }}"/> 
    <img id = "img3" src = "{{ '1.jpg' | asset_url}}" alt = "{{ product.type }} - {{ product.title }}"/> 
    <img id = "img4" src = "{{ '1.jpg' | asset_url}}" alt = "{{ product.type }} - {{ product.title }}"/> 
</div> 









<div class="buycontainer"> 
<div class="buymargin"> 


<h1 class="producttitle">{{ product.title }}</h1> 
<span class="producttype">{{ product.type }}</span> 

{% assign variant = product.selected_or_first_available_variant %} 
<span class="pricedetails">{{ variant.price | money | remove: '.00'}}</span>    
{% assign hide_default_title = false %} 
{% if product.variants.size == 1 and product.variants.first.title contains 'Default' %} 
{% assign hide_default_title = true %} 
{% endif %} 

<form id="add-item-form" action="/cart/add" method="post" class="variants clearfix"> 

<div class="product-options {% if hide_default_title %}no-options {% endif %}"> 
<div class="select clearfix"{% if hide_default_title %} style="display:none"{% endif %}> 

<select style="display:none;" id="product-select" name="id"> 
{% for variant in product.variants %} 
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money | remove: '.00'}}</option> 
{% endfor %} 
</select> 
{% include 'swatch' with 'Color' %} 
</div> 


{% if product.available %} 
<div class="lieferzeit"><span class="instock">Lieferbar</span> innerhalb von 2-4 Werktagen</div> 
<button type="submit" id="add-to-cart" class="btn__shoppingbag btn" name="add">In den Warenkorb</button> 
{% endif %} 

<button class="btn__customize btn">jetzt personalisieren</button> 
<a href="/" class="personallink">Mehr erfahren</a> 
</div> 
</form> 
</div> 

{% include 'like' %} 


</div> 


</div> 





<div class="producttabscontainer">  
<div class="producttabs"> 
<ul class="tabs"> 
<li><a href="#tab-1">Info</a></li> 
<li><a href="#tab-2">Shipping</a></li> 
<li><a href="#tab-3">Returns</a></li> 
</ul> 
<div id="tab-1"> 
{{ product.description }} 
</div> 
<div id="tab-2"> 
{% include 'testcontent' %}  
</div> 
<div id="tab-3"> 
{% include 'testcontent' %}  
</div>   
</div> 
</div> 








<div style="display:none" id="preloading"> 
{% for image in product.images offset: 1 %} 
{{ image | product_img_url: '1024x1024' | img_tag }} 
{% endfor %} 
</div> 


    {% for v in product.variants %} 
     <li id="{{product.title | append:"-" | append:v.title | append:"_1" | replace:'ß','ss' | downcase}}" style="display: none">{{product.title | append:"-" | append:v.title | append:"_1" | append:".jpg" | replace:'ß','ss' | downcase | asset_url}}</li> 
    {% endfor %} 

    {% for v in product.variants %} 
     <li id="{{product.title | append:"-" | append:v.title | append:"_2" | replace:'ß','ss' | downcase}}" style="display: none">{{product.title | append:"-" | append:v.title | append:"_2" | append:".jpg" | replace:'ß','ss' | downcase | asset_url}}</li> 
    {% endfor %} 

    {% for v in product.variants %} 
     <li id="{{product.title | append:"-" | append:v.title | append:"_3" | replace:'ß','ss' | downcase}}" style="display: none">{{product.title | append:"-" | append:v.title | append:"_3" | append:".jpg" | replace:'ß','ss' | downcase | asset_url}}</li> 
    {% endfor %} 

    {% for v in product.variants %} 
     <li id="{{product.title | append:"-" | append:v.title | append:"_4" | replace:'ß','ss' | downcase}}" style="display: none">{{product.title | append:"-" | append:v.title | append:"_4" | append:".jpg" | replace:'ß','ss' | downcase | asset_url}}</li> 
    {% endfor %} 


<script> 
var selectCallback = function(variant, selector) { 

if (variant) { 
    var form = jQuery('#' + selector.domIdPrefix).closest('form'); 
    for (var i=0,length=variant.options.length; i<length; i++) { 
    var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]'); 
    if (radioButton.size()) { 
     radioButton.get(0).checked = true; 
    } 
    } 
} 

    var images = new Array(); 



    if (variant && variant.featured_image) { 



     var mainImageDomEl = jQuery('.featured img')[0]; 
     var newURL = document.getElementById('product').className + "-" + variant.title.replace("ß", "ss") + "_1"; 
     var newImage = variant.featured_image; 
     newImage.src = document.getElementById(newURL.toLowerCase()).innerHTML; 
     Shopify.Image.switchImage(newImage, mainImageDomEl, switchImage); // Define switchImage (the callback) in your theme's JavaScript file. 

     var mainImageDomEl = jQuery('.featured img')[1]; 
     var newURL = document.getElementById('product').className + "-" + variant.title.replace("ß", "ss") + "_2"; 
     var newImage = variant.featured_image; 
     newImage.src = document.getElementById(newURL.toLowerCase()).innerHTML; 
     Shopify.Image.switchImage(newImage, mainImageDomEl, switchImage); 

     var mainImageDomEl = jQuery('.featured img')[2]; 
     var newURL = document.getElementById('product').className + "-" + variant.title.replace("ß", "ss") + "_3"; 
     var newImage = variant.featured_image; 
     newImage.src = document.getElementById(newURL.toLowerCase()).innerHTML; 
     Shopify.Image.switchImage(newImage, mainImageDomEl, switchImage); 

     var mainImageDomEl = jQuery('.featured img')[3]; 
     var newURL = document.getElementById('product').className + "-" + variant.title.replace("ß", "ss") + "_4"; 
     var newImage = variant.featured_image; 
     newImage.src = document.getElementById(newURL.toLowerCase()).innerHTML; 
     Shopify.Image.switchImage(newImage, mainImageDomEl, switchImage); 

    } 


    if (variant && variant.available) { 
     jQuery('#add-to-cart').removeAttr('disabled').removeClass('disabled'); // remove unavailable class from add-to-cart button, and re-enable button 
     if(variant.price < variant.compare_at_price){ 
     jQuery('#price-preview').html(Shopify.formatMoney(variant.price, "{{ shop.money_format }}") + " <del>" + Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}") + "</del>"); 
     } else { 
     jQuery('#price-preview').html(Shopify.formatMoney(variant.price, "{{ shop.money_format }}")); 
     } 
    } else { 
     jQuery('#add-to-cart').addClass('disabled').attr('disabled', 'disabled'); // set add-to-cart button to unavailable class and disable button 
     var message = variant ? "{{ variant.price | money | remove: '.00'}}" : "Unavailable"; 
     jQuery('#price-preview').text(message); 
    } 
    }; 

    jQuery(document).ready(function($){ 
    new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback, enableHistoryState: true }); 

{% if product.options.size == 1 %} 
    {% for variant in product.variants %} 
    {% unless variant.available %} 
    jQuery('.single-option-selector option').filter(function() { return jQuery(this).html() === {{ variant.title | json }}; }).remove(); 
    {% endunless %} 
    {% endfor %} 
    jQuery('.single-option-selector').trigger('change'); 
{% endif %} 


    }); 

</script> 




<script> 

var switchImage = function(newImageSrc, newImage, mainImageDomEl) { 

$(mainImageDomEl).attr('src', newImageSrc); 
$(mainImageDomEl).parents('a').attr('href', newImageSrc); 
}; 

</script>

来源

2014-11-21 Alexander H

功能是正确的，但我们没有整个代码，所以我们不知道别的是正确的或错误的。 – kappaallday 2014-11-21 23:40:08

jQuery(mainImageDomEl).stop().fadeOut('slow', function() { 
    $(mainImageDomEl).attr('src', newImageSrc); 
    $(mainImageDomEl).parents('a').attr('href', newImageSrc); 
    $(this).delay(400).fadeIn('slow'); 
});

来源

2014-11-21 23:41:35 AvrilAlejandro

<script> 
var parsed = 0; 
var switchImage = function(newImageSrc, newImage, mainImageDomEl) { 
    $(mainImageDomEl).attr('src', newImageSrc); 
    $(mainImageDomEl).parents('a').attr('href', newImageSrc); 
    $(mainImageDomEl).css('transition', ''); 
    $(mainImageDomEl).fadeOut(300, function(){ 
     $(mainImageDomEl).attr('src', newImageSrc); 
     $(mainImageDomEl).parents('a').attr('href', newImageSrc); 
     setTimeout(function(){ 
      $(mainImageDomEl).fadeIn(300); 
     }, 100); 
    }); 
}; 


//if you want to remove the fades, just use this method instead of the previous 
//var switchImage = function(newImageSrc, newImage, mainImageDomEl) { 
//  $(mainImageDomEl).attr('src', newImageSrc); 
// $(mainImageDomEl).parents('a').attr('href', newImageSrc); 
//}; 

</script>

来源

2014-11-22 22:29:51

为什么这种淡入淡出效果不起作用？

回答

相关问题