Question

尝试在翻转时更改框的背景颜色（更容易向您展示我的意思：（http://iam.colum.edu/students/jordan.max/demo/demo.php）。我是jQuery的新手，并且非常轻松地做了一个教程能够解码代码并弄清楚该怎么做才能让它做我想做的事情。我这样做相对容易，直到我试图改变元素翻转时背景的颜色。这很奇怪，因为当我使用'inspect element'然后点击鼠标上的东西，它说我在“元素”中设置了背景但是我的CSS中不存在。不要试图让人困惑（这可能听起来很混乱，这就是为什么我给了链接），希望有人知道我的问题是什么。

demo.php

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Sponsor Flip Wall With jQuery &amp; CSS | Tutorialzine demo</title>

        <link rel="stylesheet" type="text/css" href="styles.css" />
        <link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
        <script type="text/javascript" src="jquery.flip.min.js"></script>

        <script type="text/javascript" src="script.js"></script>

    </head>

    <body>

        <h1>Sponsor Flip Wall With jQuery &amp; CSS</h1>
        <h2><a href="http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/">Go Back to Portfolio &raquo;</a></h2>

<?php

    // Each sponsor is an element of the $sponsors array:

    $sponsors = array(
        array('github','The biggest social network in the world.','http://www.facebook.com/'),
        array('twitter','The leading software developer targeted at web designers and developers.','http://www.adobe.com/')
    );


    // Randomizing the order of sponsors:

    shuffle($sponsors);

?>



        <nav id="main">

            <figure class="sponsorListHolder">


        <?php

            // Looping through the array:

            foreach($sponsors as $company)
            {
                echo'
                <div class="sponsor" title="Click to flip">
                    <div class="sponsorFlip" > 
                            <p>'.$company[0].'</p>
                    </div>

                    <div class="sponsorData">
                        <div class="sponsorDescription">
                            '.$company[1].'
                        </div>
                        <div class="sponsorURL">
                            <a href="'.$company[2].'">'.$company[2].'</a>
                        </div>
                    </div>
                </div>

                ';
            }

        ?>

                <aside class="clear"></aside>
            </figure>

        </nav>
        <footer>
            <p class="note">None of these companies are actually sponsors of Tutorialzine.</p>
        </footer>
    </body>
</html>

的script.js

$(document).ready(function(){
    /* The following code is executed once the DOM is loaded */

    $('.sponsorFlip').bind("click",function(){

        // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):

        var elem = $(this);

        // data('flipped') is a flag we set when we flip the element:

        if(elem.data('flipped'))
        {
            // If the element has already been flipped, use the revertFlip method
            // defined by the plug-in to revert to the default state automatically:

            elem.revertFlip();

            // Unsetting the flag:
            elem.data('flipped',false)
        }
        else
        {
            // Using the flip method defined by the plugin:

            elem.flip({
                direction:'lr',
                speed: 350,
                onBefore: function(){
                    // Insert the contents of the .sponsorData div (hidden from view with display:none)
                    // into the clicked .sponsorFlip div before the flipping animation starts:

                    elem.html(elem.siblings('.sponsorData').html());
                }
            });

            // Setting the flag:
            elem.data('flipped',true);
        }
    });

});

styles.css的

*{
    /* Resetting the default styles of the page */
    margin:0;
    padding:0;
}

body{
    /* Setting default text color, background and a font stack */
    font-size:0.825em;
    color:#666;
    background-color:lightgreen;
    font-family:Arial, Helvetica, sans-serif;
}

.sponsorListHolder{
    margin-bottom:30px;

}

.sponsor{
    width:400px;
    height:400px;
    float:left;
    margin:4px;
    padding: 30px;
    background: #F66F89;
    /* Giving the sponsor div a relative positioning: */
    position:relative;
    cursor:pointer;
}

.sponsor:active{
    background: #F66F89;
}

.sponsorFlip{
    /*  The sponsor div will be positioned absolutely with respect
        to its parent .sponsor div and fill it in entirely */

    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border:1px solid #ddd;  
    background: #61D89F;
    color:#0196e3;
    font-family: 'Oregano', cursive;
    font-size: 2em;
}

.sponsorFlip:hover{
    border:1px solid #999;

    /* CSS3 inset shadow: */
    -moz-box-shadow:0 0 30px #999 inset;
    -webkit-box-shadow:0 0 30px #999 inset;
    box-shadow:0 0 30px #999 inset;
}



.sponsorFlip img{
    /* Centering the logo image in the middle of the sponsorFlip div */
    /* Not being used right now 
    position:absolute;
    top:50%;
    left:50%;
    margin:-70px 0 0 -70px;
    */
} 
.sponsorData{
    /* Hiding the .sponsorData div */
    display:none;
}

.sponsorDescription{
    font-size:11px;
    padding:50px 10px 20px 20px;
    font-style:italic;

}

.sponsorURL{
    font-size:10px;
    font-weight:bold;
    padding-left:20px;
}

.clear{
    /* This class clears the floats */
    clear:both;
}


/* The styles below are only necessary for the styling of the demo page: */


#main{
    position:relative;
    margin:0 auto;
    width:960px;
}

h1{
    padding:30px 0;
    text-align:center;
    text-shadow:0 1px 1px white;
    margin-bottom:30px;
    background-color: #F66F89;
}

h1,h2{
    font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}

h2{
    font-size:14px;
    font-weight:normal;
    text-align:center;

    position:absolute;
    right:40px;
    top:40px;
}

.note{
    font-size:12px;
    font-style:italic;
    padding-bottom:20px;
    text-align:center;
}

a, a:visited {
    color:#0196e3;
    text-decoration:none;
    outline:none;
    color: lightgreen;
}

a img{
    border:none;
}

Answer 1

如果我没弄错，你可以使用“color”作为参数

   elem.flip({
                direction:'lr',
                speed: 350,
                color: 'blue', //color
                onBefore: function(){}
    })

如何影响受javascript影响的元素

1 个答案: