Flip JQuery plugin not working

问题

I'm making a website for a project, and I discovered and decided to use the, jquery flip plugin, and it's not working... I did manage to get it working a while ago, but couldn't since. Bear in mind I have not yet made the grafic part of the website yet, so what's there is just for show.

Here's the source code for the website.

No errors, just not working (fliping said boxes). As I said, it worked before, but when I added those other boxes, it stopped working.

回答1:

Include jQuery UI before the Flip plugin. Since the Flip plugin needs jQuery UI to be available it probably fails when it's not.

It's always a good idea to use the demos on the plugin's documentation website as a template. The flip plugin includes the JS files in this order:

    <script src="/lab/flip/js/jquery-ui-1.7.2.custom.min.js"></script>
    <script src="/lab/flip/js/jquery.flip.min.js"></script>

Also, in your JSFIddle, you have to use absolute URLs for the resources, JSFiddle doesn't magically find jquery/jquery.flip.min.js.

Here is an updated version of your JSFiddle, I grabbed the above files from the plugin's documentation: http://jsfiddle.net/mNQJB/2/

If the above didn't fix your problem, there was an error with your code, one of the .flip calls had an invalid content property:

Uncaught SyntaxError: Unexpected token .

Make sure that your content properties are all on a single line or you have escaped the end-line characters properly.

Update

To escape an end-line character in JS we do this:

var str = "This is a string and \
I want it to use two lines.";

Notice the backslash, it's the standard escaping character. Now if you want to create a new line that will be rendered via HTML then you should use a <br /> tag:

var str = "This is a string and <br />I want it to use two lines.";

回答2:

you have an unterminated string constant in this section:

 $("#aimsb").bind("click",function(){
        $("#aims").flip({
            direction: 'bt',
            color: '#39AB3E',
            content: 'The aims of the GSP (Global Student Project) are to give students from all around the world both a culturally and personally enriching experience, as well as equal learning, and subsquently job opportunities
            .'
        });
    });

note the line feed prior to the .'

来源：https://stackoverflow.com/questions/9268128/flip-jquery-plugin-not-working

标签

javascript

jquery

plugins

flip