javascript - CSS 过渡和时间似乎不对

Question

首先，我愿意接受任何想法/建议。就使用各种风景图像而言，我希望保持主页不变。我遇到的问题当然是一幅图像上可读的字体颜色在另一幅图像上可读性不是很好。所以我用谷歌搜索了一些想法，发现一个黑暗的区域/背景是最专业的。很棒，现在它适用于所有浅色图像，但不适用于深色图像。所以我想出了根据图像(深色或浅色)切换字体颜色和背景的想法。我遇到的问题是字体/背景在图像之前大约 1-2 秒切换？？？此外，我想我想添加交叉淡入淡出或一些动画效果以使开关更平稳。这是网站:

http://alexandredairy.com/staging/

Again I am open to any ideas / suggestions

所以我做的第一件事就是用深色或浅色前缀命名图像，这样 css 就可以相应地切换。所以我有二十张左右的图片这样命名:

Dark_Cover1_PastrDairy.jpg or Light_Cover1_PastrPoultry.jpg

我的 CSS 是:

/*Back ground shading so we can read text*/
.lighttextbackground
{
color:#000;
background-color:rgba(255, 255, 255, 0.35);
box-shadow:0px 0px 10px 10px rgba(255, 255, 255, 0.35);
}

.lighttextbackground a
{
color:#000;
}

.lighttextbackground p
{
color:#000;
}

.darktextbackground
{
color:#fff;
background-color:rgba(0, 0, 0, 0.35);
box-shadow:0px 0px 10px 10px rgba(0, 0, 0, 0.35);
}

.darktextbackground a
{
color:#fff;
}

.darktextbackground p
{
color:#fff;
}

我想要效果的典型 HTML 元素是:

<div id="pageslogan" class="slogan lighttextbackground">
....code...
</div>

至于 jquery，我只发布了我认为相关的函数。如果需要，我绝对可以发布更多内容，或者您​​可以浏览网站并使用开发人员工具 (F12) 获取所有内容。

function changeImageHandler(){
    var imgSRC;
$("#inner ul>li").eq(currImg).addClass("active");
$("#inner ul>li").eq(prevImg).removeClass("active");

    loadComplete = false;
image.addClass("topImg").css({"z-index":1});
imgSRC = imageSRCLink.eq(currImg).attr("href");

imageHolder.append("<img class='bottomImg' src="+imgSRC+" alt=''>");
$(".bottomImg").css({display:"none", "z-index":0}).bind("load", loadImageHandler);
$("#imgSpinner").css({display:"block"}).stop().animate({opacity:1}, 500, "easeOutCubic");

imgName = imageSRCLink.eq(currImg).attr("href").split('/')[2];
TextReadabilityHandler(imgName.substring(0, 5));

discription.eq(currImg).css({left:$(document).width()*dragDirection, display:"block"}).animate({left:0}, 1000, "easeInOutCubic");
    discription.eq(prevImg).animate({left:$(document).width()*dragDirection*-1}, 1000, "easeInOutCubic", function(){
            discription.eq(prevImg).css({display:"none"})

        });
    }

在上述函数的大约 3/4 处，您会看到 TextReadabilityHandler，这是发生切换的地方:

function TextReadabilityHandler(_imgNameSwitch)
    {
        if(_imgNameSwitch == 'Light')
        {
            $("#pagetitle").attr('class', 'sitetitle lighttextbackground');
            $("#pagemenu").attr('class', 'sf-menu lighttextbackground');
            $("#pageslogan").attr('class', 'slogan lighttextbackground');
        }
        else if (_imgNameSwitch == 'Dark_')
        {
            $("#pagetitle").attr('class', 'sitetitle darktextbackground');
            $("#pagemenu").attr('class', 'sf-menu darktextbackground');
            $("#pageslogan").attr('class', 'slogan darktextbackground');
        }
        else
        { alert(_imgNameSwitch); }
    }

所以我想在图像切换时做一个交叉淡入淡出。我难过的地方是如何实现。正如我所写的那样，html 元素被更新为一个新类，并且该更改会立即应用。我将如何/在何处实现 .fadeOut()/.fadeIn()？？

谢谢

作为旁注，我尝试将我的网站提交到 csscreator.com 以获得对设计的严格审查/建议，但没有任何反馈。任何可以让我对设计进行评论的建议都会有所帮助。

---

编辑

谢谢 user3037493 和 Zeaklous。

你们都突破了我遇到的障碍。以下是您的回答在我脑海中触发的内容。

我添加了一个自定义命名空间(为了便于阅读)

/* Text Readability switching */

var txtread = 
{
    onReady: function(_imgname)
    {
        txtread.fadeoutText(_imgname);

        txtread.fadeinText();
    },

    fadeoutText: function(_imgname)
    {
        $("#pagetitle").fadeOut(1250);
        $("#pagemenu").fadeOut(1250);
        $("#pageslogan").fadeOut(1250);
        $("#sitecopy").fadeOut(1550, txtread.TextReadabilityHandler(_imgname));
    },

    fadeinText: function()
    {
        $("#pagetitle").fadeIn(1250);
        $("#pagemenu").fadeIn(1250);
        $("#pageslogan").fadeIn(1250);
        $("#sitecopy").fadeIn(1250);
    },

    TextReadabilityHandler: function(_imgNameSwitch)
    {
        if(_imgNameSwitch == 'Light')
        {
            $("#pagetitle").attr('class', 'sitetitle lighttextbackground');
            $("#pagemenu").attr('class', 'sf-menu lighttextbackground');
            $("#pageslogan").attr('class', 'slogan lighttextbackground');
        }
        else if (_imgNameSwitch == 'Dark_')
        {
            $("#pagetitle").attr('class', 'sitetitle darktextbackground');
            $("#pagemenu").attr('class', 'sf-menu darktextbackground');
            $("#pageslogan").attr('class', 'slogan darktextbackground');
        }
        else
        { alert(_imgNameSwitch); }
    }
}

然后我修改了ChangeImageHandler中的这两行。

imgName = imageSRCLink.eq(currImg).attr("href").split('/')[2];
TextReadabilityHandler(imgName.substring(0, 5));

到

imgName = imageSRCLink.eq(currImg).attr("href").split('/')[2];
txtread.onReady(imgName.substring(0, 5));

所以整个事情看起来像这样:

function changeImageHandler(){
        var imgSRC;
        $("#inner ul>li").eq(currImg).addClass("active");
        $("#inner ul>li").eq(prevImg).removeClass("active");


        loadComplete = false;
        image.addClass("topImg").css({"z-index":1});
        imgSRC = imageSRCLink.eq(currImg).attr("href");

        imageHolder.append("<img class='bottomImg' src="+imgSRC+" alt=''>");
        $(".bottomImg").css({display:"none", "z-index":0}).bind("load", loadImageHandler);
        $("#imgSpinner").css({display:"block"}).stop().animate({opacity:1}, 500, "easeOutCubic");


        imgName = imageSRCLink.eq(currImg).attr("href").split('/')[2];
       txtread.onReady(imgName.substring(0, 5));



        discription.eq(currImg).css({left:$(document).width()*dragDirection, display:"block"}).animate({left:0}, 1000, "easeInOutCubic");
        discription.eq(prevImg).animate({left:$(document).width()*dragDirection*-1}, 1000, "easeInOutCubic", function(){
            discription.eq(prevImg).css({display:"none"})

        });
    }

现在我有了淡入/淡出效果，当文本 block 淡出时，我通过使版权淡出花费更长的时间(确保绝大多数内容消失)然后执行返回函数来快速更改类在这里切换类，如我的自定义命名空间中所示:

$("#sitecopy").fadeOut(1550, txtread.TextReadabilityHandler(_imgname));

当然没有什么是完美的，出于某种原因我还没有弄清楚有一个元素没有淡入/淡出？这是题外话，所以我在这里发布了一个新的 SO 问题。

Element refusing to fade out or in

Answer 1

抱歉，我没有足够的声誉来评论您的问题，这个答案实际上只是一个评论....黑色背景的白色文本将更容易阅读。这是一个 JSfiddle http://jsfiddle.net/Kyle_Sevenoaks/ZnfED/1/基本上，你的 .slogan p 的 css 你会把颜色设为白色并添加这个文本阴影

{text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;}

编辑添加:要在图像之前更改文本背景，请在 changeImageHandler 函数的开头调用 TEXTREADABILITYHANDLER 并尝试根据 http://api.jquery.com/delay/ 延迟 imgSpinner.animate|