jQuery代码不改变CSS

Posted 2023-05-08

【中文标题】jQuery代码不改变CSS

【英文标题】：JQuery code not changing CSS

【发布时间】：2013-02-04 20:29:56

【问题描述】：

我有以下sn-p的代码：

http://jsfiddle.net/Wcexy/

内容如下：

html：

<div id="secrets-slider"></div>

CSS：

#secrets-slider 
    position: relative;
    left: 50%;
    top:50px;
    height: 200px;


.ui-state-default, .ui-widget-content .ui-state-default 
    background: red;

javascript：

var flash = 1;

$(function () 
    $("#secrets-slider").slider(
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 70,
        animate: 3000,
        slide: function (event, ui) 
            $("#amount").val(ui.value);
            flash=0;        
        ,
    );
    function flashing() 
        if (flash === 0) 
            $("#secrets-slider a").stop(true, true);
         else 
            $("#secrets-slider a").animate(
                
                    backgroundColor: '#ff8c00'
                , 1000,
                function() 
                    $("#secrets-slider a").animate(
                        
                            backgroundColor: '#f00'
                        , 1000
                    )
                                                         
            )
            setTimeout(flashing,2000);
        
    
    flashing();
);

现在我将这段代码实现到我想为朋友创建的网站中。可在此处获取：http://blah.eu5.org/

当我添加此代码时，它似乎不起作用。值得注意的是，jquery 滑块句柄根本没有脉冲。我已经检查了该事件是否正在使用alert("Moo"); 触发，但它似乎并没有改变 CSS。为什么会这样？

【问题讨论】：

那个全局变量“flash”呢？它在哪里/如何定义？

在hs.js（控制页面的主脚本文件）的顶部定义为一个全局变量。它从 1 开始，当您第一次移动滑块时移动到 0。

每次我检查文档时，我都看不到发生任何变化。是否有一些 CSS 覆盖了这个？也许我的 CSS 重置了？

简而言之，什么可以阻止$("#secrets-slider a").animate(backgroundColor:'#ff8c00', 1000); 工作？

附加：jsfiddle.net/Wcexy/1。看来我可以调整它的大小，它只是颜色不起作用。在网站上实施时，调整大小确实有效。这个问题更明显是一个 CSS 问题。有人建议吗？

【参考方案1】：

经过一番头疼后，我发现在后台使用.animate() 实际上是 JQuery UI 插件的一部分，我使用的是 UI 插件的简化版本，它不包含此代码（几乎有滑块，就是这样）。

让这成为我的教训。