Polymer and jQuery. An Odd Problem

[Norman Potter]

Hey peeps

Learning Polymer here so be gentle with me!!

Something odd is happening here, I'm mixing Polymer with jQuery which isn't the problem. The problem (in the code below) is that the jQuery.fadeIn method IS working jQuery.fadeOut isn't. It's very strange. I know that hide is being called by shoving in a quick console.log.

Anyone who can shed some light on this will be my best friend for 24 hours ...

<link rel="import" href="/bear-vs/public/assets/components/bear-overlay.html" />

<polymer-element name="bear-popup" attributes="width height fadeIn, fadeOut, zIndex modal modalColor modalOpacity">

<style>

:host {

display: block;

}

a.close {

display: inline-block;

position: absolute;

top: 10px;

right: 10px;

color: #FFFFFF;

background-color: #DD0000;

padding: 2px 10px;

cursor: pointer;

}

</style>

<template>

<bear-overlay id="overlay" on-click="{{hide}}" fadeIn="{{fadeIn}}" fadeOut="{{fadeOut}}" color="{{modalColor}}" opacity="{{modalOpacity}}" zIndex="{{zIndex - 1}}"></bear-overlay>

<div id="popup" class="bear-popup" style="display:none;width:{{width}};height:{{height}};z-index:{{zIndex}}">

<a on-click="{{hide}}" class="close"><i class="fa fa-times"></i></a>

<content></content>

</div>

</template>

<script>

(function() {

var active = false;

Polymer('bear-popup', {

width: '400px',

height: '200px',

fadeIn: 0,

fadeOut: 0,

zIndex: 1000,

modal: false,

modalOpacity: 0.5,

modalColor: '#000000',

show: function() {

if (!active) {

if (this.modal) {

this.$.overlay.show();

}

$(this.$.popup).fadeIn(this.fadeIn);

active = true;

}

},

hide: function() {

$(this.$.popup).fadeOut(this.fadeOut);

this.$.overlay.hide();

active = false;

}

});

})();

</script>

</polymer-element>

Thanks peeps

[Martin Kleinschrodt]

There are some commas inside of the attributes value on your polymer-element definition. Don't think those should be there.

[Martin Kleinschrodt]

Btw, this would probably be a question for stackoverflow: http://stackoverflow.com/questions/tagged/polymer

[Eric Bidelman]

StackOverflow would be great :) Please include a jsbin with runnable code.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/5cf587e1-2855-4024-927e-83da4a55d262%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.